<template>
	<view>
		<view>
			<view class="">
				<top-status></top-status>
				<view class="tabs"></view>
			</view>
			<view class="page_top">
				<top-status></top-status>
				<view class="tabs">
					<uni-icons type="back" size="24" @click="nav_back" color="#000000"></uni-icons>
					<view class="name d1">
						{{current_name}}
					</view>
					<!-- #ifdef APP-PLUS-->
					<view class="app_onlin" @click="open_user()">
						主页
					</view>
					<!-- #endif  -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="onlin" @click="open_user()">
						主页
					</view>
					<!-- #endif  -->
				</view>
			</view>
		</view>
		<view @touchstart="hideDrawer">
			<scroll-view scroll-y="true" :scroll-into-view="scrollId" :style="{height: `calc(100vh - ${offset}rpx)`}"
				class="scroll">
				<view v-for="(l,i) in list" :id="'scroll'+l.messageID" :key="i" class="chat-wrap">
					<!-- direction=0是自己 1是对面  -->
					<!-- 对话时间 -->
					<view v-if="TimeShow(i)" class="chat-time chat-null"></view>
					<view v-else-if="l.subType==1" class="chat-time">
						<text>{{l.time}}</text>
					</view>
					<!-- 加微信(系统消息) -->
					<view v-else-if="l.subType==91&&l.direction == 0" class="chat-system" @click="addWechat()">
						加微信是会员特权，点击这里获取
					</view>
					<view v-else-if="l.subType==91&&l.direction == 1" class="chat-null"></view>
					
					<!-- 加电话(系统消息) -->
					<view v-else-if="l.subType==92&&l.direction == 0" class="chat-system" @click="addWechat()">
						想要互换手机号码，请加对方微信
					</view>
					<view v-else-if="l.subType==92&&l.direction == 1" class="chat-null"></view>

					<view class="chat-system" v-else-if="l.subType==99&&l.direction == 0"  @click="$refs['member_gift'].open()">
						对方还不是会员，<text class="metals">点击赠送会员</text>
					</view>
					<view v-else-if="l.subType==99&&l.direction == 1" class="chat-null"></view>
					
					
					<view v-else-if="l.subType==198&&l.direction == 0" class="chat-system"  @click="nav_to('/pages/user/apply_member')">
						您还没有开通会员，只能回复1条消息，开通会员发送更多消息，<text class="metals">点击开通会员</text>
					</view>
					<view v-else-if="l.subType==198&&l.direction == 1" class="chat-null"></view>
					
					<view :class="[isFriend ? 'hidden' : 'chat-system']" v-else-if="l.subType==199&&l.direction == 0" @click="add_friend()">
						你和对方还不是好友，<text class="metals">点击添加好友</text>
					</view>
					<view v-else-if="l.subType==199&&l.direction == 1" class="chat-null"></view>

					<!-- 双方已是好友 -->
					<view v-else-if="l.subType==97&&l.direction == 0" class="chat-system">
						我们已经是好友了，可以开始聊天啦
					</view>
					<view v-else-if="l.subType==97&&l.direction == 1" class="chat-system">
						对方已经同意您的好友申请，可以开始聊天啦
					</view>



					<!-- 拒绝添加微信(自己) -->
					<view v-else-if="l.subType==93&&l.direction == 0" class="chat-wx">
						我已拒绝对方微信申请，赠送礼物将退回对方账户
					</view>
					<!-- 拒绝添加微信(对方) -->
					<view v-else-if="l.subType==93&&l.direction == 1" class="chat-wx">
						对方已拒绝您的微信申请，礼物金额已退回余额
					</view>

					<!-- 同意接收礼物(自己) -->
					<view v-else-if="l.subType==94&&l.direction == 0" class="chat-wx">
						<view class="chat-wx chat-bg-ed">
							<view>
								<image
									:src="JSON.parse(l.message).Icon?JSON.parse(l.message).Icon:'https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/gift_open_icon.png'"
									mode=""></image>
							</view>
							<view class="wx-btn">
								恭喜获得价值{{JSON.parse(l.message).Price}}元的{{JSON.parse(l.message).Name}}
							</view>
						</view>
					</view>
					<!-- 同意接收礼物(对方) -->
					<view v-else-if="l.subType==94&&l.direction == 1" class="chat-wx">
						对方已拆开您赠送的礼物
					</view>

					<!-- 同意接收商品礼物(自己) -->
					<view v-else-if="l.subType==95&&l.direction == 0" class="chat-wx">
						恭喜您获得对方赠送的商品礼物
					</view>
					<!-- 同意接收商品礼物(对方) -->
					<view v-else-if="l.subType==95&&l.direction == 1" class="chat-wx">
						对方已拆开您赠送的商品礼物
					</view>

					<!-- 拒绝商品礼物(自己) -->
					<view v-else-if="l.subType==96&&l.direction == 0" class="chat-wx">
						我已拒绝对方的商品礼物
					</view>
					<!-- 拒绝商品礼物(对方) -->
					<view v-else-if="l.subType==96&&l.direction == 1" class="chat-wx">
						对方已拒绝您的礼物，礼物金额已退回余额
					</view>



					<view v-else-if="l.subType==98&&l.direction == 0" class="chat-wx">
						已成功赠送一个月【{{JSON.parse(l.message).ProductName}}】给TA
					</view>
					<view v-else-if="l.subType==98&&l.direction == 1" class="chat-wx">
						对方已赠送一个月的【{{JSON.parse(l.message).ProductName}}】给我
					</view>


					<!-- 对话结构   （左右结构的显示内容 -->
					<view v-else :class="{'flex-flow':l.direction == 0}" class="chat-item">
						<!-- 头像 -->
						<view class="chat-head" @click="view_user(l.senderUserID)">
							<image :src="getChatAvatar(l.senderUserID)" mode="aspectFill"></image>
						</view>
						<!-- 我的微信号 -->
						<view v-if="l.subType==11" @click="copy(l.message)" class="chat-content">
							<view class="chat-weixin">
								<view class="weixin-icon">
									<uni-icons type="weixin" size="46" :color="l.direction == 0?'#ffffff':'#4ce670'" />
								</view>
								<view class="weixin-no">
									这是我的微信<span>(点击复制)</span>
									<view> {{l.message}} </view>
								</view>
							</view>
						</view>

						<!-- 申请微信(自己) -->
						<view v-if="l.subType==10&&l.direction == 0">
							<view class="chat-wxbox">
								<view class="chat-tit">
									<view class="tit-head">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/wx.png" mode="aspectFill"></image>
									</view>
									<view class="tit-text">
										我想要添加您的微信，您是否同意？
									</view>
								</view>
							</view>
						</view>
						<!-- 申请微信(对方) -->
						<block v-if="l.subType==10&&l.direction == 1">
							<view :class="['chat-wxbox',isFriendFun(l.messageID,'wx') ? '' : 'chat-mask']">
								<view class="chat-tit">
									<view class="tit-head">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/wx.png" mode="aspectFill"></image>
									</view>
									<view class="tit-text">
										对方想要添加您的微信，您是否同意？
									</view>
								</view>
								<view class="chat-btn" v-if="isFriendFun(l.messageID,'wx')">
									<view class="btn-item" @click="wxSub(99,i,JSON.parse(l.message).EventID,l.messageID)">
										拒绝
									</view>
									|
									<view class="btn-item" style="color: #111;" @click="wxSub(1,i,JSON.parse(l.message).EventID,l.messageID)">
										同意
									</view>
								</view>
							</view>
						</block>

						<!-- 申请加好友(自己) -->
						<view v-if="l.subType==14&&l.direction == 0">
							<view class="chat-wxbox">
								<view class="chat-tit">
									<view class="tit-head">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/friend.png" mode="aspectFill"></image>
									</view>
									<view class="tit-text">
										我想要添加您为好友，您是否同意？
									</view>
								</view>
							</view>
						</view>
						<!-- 申请加好友(对面) -->
						<block v-if="l.subType==14&&l.direction == 1">
							<view :class="['chat-wxbox',isFriendFun(l.messageID,'friends') ? '' : 'chat-mask']">
								<view class="chat-tit">
									<view class="tit-head">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/friend.png" mode="aspectFill"></image>
									</view>
									<view class="tit-text">
										对方想要添加您为好友，您是否同意？
									</view>
								</view>
								<view class="chat-btn" v-if="isFriend == false">
									<view class="btn-item" @click="auditFriendSub(-1,JSON.parse(l.message).EventID,l.messageID,l.senderUserID)">
										拒绝
									</view>
									|
									<view class="btn-item" style="color: #111;" @click="auditFriendSub(1,JSON.parse(l.message).EventID,l.messageID,l.senderUserID)">
										同意
									</view>
								</view>
							</view>

						</block>

						<!-- 赠送礼物(自己) -->

						<view v-if="l.subType==12&&l.direction == 0">
							<view class="gift_box">
								<view class="gift_icon gift_iconMy">
									<image :src="JSON.parse(l.message).Icon?JSON.parse(l.message).Icon:' /static/img/icon_bbt.png'"
										mode="">
										</image>
								</view>
								<view class="gift_content">
									<view class="tit">
										您赠送礼物给对方
									</view>
									<view class="lit" style="color: #111;">
										价值￥{{JSON.parse(l.message).Price}}
									</view>
								</view>
							</view>
							<!-- <view class="chat-wx chat-bg">
								<view>
									<image
										:src="JSON.parse(l.message).Icon?JSON.parse(l.message).Icon:'/static/img/icon_bbt.png'"
										mode=""></image>
								</view>
								<view class="wx-btn">
									<view class="btn-gift-send">赠送礼物￥{{JSON.parse(l.message).Price}} </view>
								</view>
								<view class="bottom"><uni-icons type="gift-filled" color="#f00"></uni-icons>礼物</view>
							</view> -->
						</view>
						<!-- 赠送礼物(对面) -->
						<block v-else-if="l.subType==12&&l.direction == 1">
							<view class="gift_box">
								<view class="gift_icon">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17103267965481355.png" mode=""></image>
								</view>
								<view class="gift_content">
									<view class="tit">
										送你一份礼物
									</view>
									<view class="gift_btn" @click="doGift(1,i)">
										点击领取
									</view>
								</view>
							</view>
						</block>


						<!-- 赠送商品礼物(自己) -->
						<block v-if="l.subType==13&&l.direction == 0">
							<view class="chat-wx chat-bg2 chat-own">
								<view class="top">
									<view class="sanjiao1"></view>
									<view class="hongbao">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/giftbox.png" mode="aspectFill"></image>
									</view>
									<view class="text">
										<text>礼物一份</text>
										<text style="color:#a1a1a1">(15天未领取礼物将退回)</text>
									</view>
								</view>
								<view class="bottom">
									商城礼物
								</view>
							</view>
							<view style="height: 20rpx;"></view>
						</block>
						<!-- 赠送商品礼物(对面) -->
						<block v-else-if="l.subType==13&&l.direction == 1">
							<view class="chat-wx chat-bg2 chat-on" @click="ReceivingGifts(l.message,i)">
								<view class="top">
									<view class="sanjiao2"></view>
									<view class="text">
										<text>点击拆开礼物~</text>
										<text style="color:#a1a1a1">(15天未领取礼物将退回)</text>
									</view>
									<view class="hongbao">
										<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/giftbox.png" mode="aspectFill"></image>
									</view>
								</view>
								<view class="bottom">
									商城礼物
								</view>
							</view>
							<view style="height: 20rpx;"></view>
						</block>
						<!-- 文本 图片  语音-->
						<view v-if="l.type==1" class="chat-content">
							<rich-text :nodes="l.message"></rich-text>
						</view>
						<!-- 图片 -->
						<view v-if="l.type==11" class="chat-imgs"
							:style="{width: l.thumbnailWidth + 'px',height: (l.thumbnailHeight>220?220:l.thumbnailHeight) + 'px'}">
							<image @click="previewImage(l.largeImageDownloadUrl)" :src="l.largeImageDownloadUrl" mode="aspectFill">
							</image>
						</view>
						<!-- 音频 -->
						<view v-if="l.type==13" @click="playVoice(l.fileDownloadUrl,i)"
							:style="{width:`${getWidth(l.fileSize)}rpx`}" class="chat-voice">

							<block v-if="l.direction == 0">{{l.fileSize}}<span>"</span>
								<!-- <image class="bo-image" src="/static/img/yuyin_bobao.png" mode=""> </image> -->
								<view class="wifi-symbol" :class="{animation:playMsg.i==i&&playMsg.play==0}">
									<view class="wifi-circle first"></view>
									<view class="wifi-circle second"></view>
									<view class="wifi-circle third"></view>
								</view>
							</block>
							<block v-else>
								<view class="wifi-symbol direction" :class="{animation:playMsg.i==i&&playMsg.play==0}">
									<view class="wifi-circle first"></view>
									<view class="wifi-circle second"></view>
									<view class="wifi-circle third"></view>
								</view>{{l.fileSize}}<span>"</span>
							</block>
						</view>

					</view>
				</view>
				<view class="fit-bottom"> </view>
			</scroll-view>
		</view>
		<!-- 功能区域 -->
		<view :class="moreClass" class="chat-more">
			<view @click="getImage('album')" class="chat-cell">
				<view class="chat-icon">
					<uni-icons type="image" size="34" color="#333" />
				</view>
				<text>相册</text>
			</view>
			<view @click="getImage('camera')" class="chat-cell">
				<view class="chat-icon">
					<uni-icons type="camera-filled" size="34" color="#333" />
				</view>
				<text>拍摄</text>
			</view>
			<view class="chat-cell" @click="addWechat()">
				<view class="chat-icon">
					<uni-icons type="weixin" size="34" color="#333" />
				</view>
				<text>加微信</text>
				<view class="chat-member">会员专享</view>
			</view>
			<view class="chat-cell" @click="$refs['gift'].open()">
				<view class="chat-icon">
					<uni-icons type="gift-filled" size="34" color="#333" />
				</view>
				<text>送礼物</text>
			</view>
			<view class="chat-cell" @click="$refs['member_gift'].open()">
				<view class="chat-icon">
					<uni-icons type="vip-filled" size="36"></uni-icons>
				</view>
				<text>送会员</text>
			</view>
		</view>
		<!-- 底部输入栏 -->
		<block v-if="isFriend">
			
			<view class="chat-box" style="background-color: #FAFAFA;"
				:class="{'more-show':moreClass=='more-show','fit-bottom':inputBottom==0}"
				:style="{ bottom: inputBottom + 'px  !important' }">
				<view class="operate_area">
					<view style="margin-left: 4rpx;" class="item" @click="addWechat()"><uni-icons type="weixin" size="20" color="#40bd66"></uni-icons>加微信
					</view>
					<view class="item" @click="$refs['member_gift'].open()"><uni-icons type="vip-filled" size="20"
							color="#ff5500"></uni-icons>送会员</view>
				</view>
				<view style="display: flex;">
					<block v-if="!isMember">
						
						<view class="box-switch">
							<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/yuyin.png" mode="">
							</image>
						</view>
						<view class="box-input-diabled">
							<view class="tips">您的会员已过期</view>
						</view>
						<view class="box-upgrade" @click="memberUpgarde"> 开通会员 </view>
					</block>
					<block v-else>
						<view @click="changeEvent" class="box-switch">
							<image v-if="changeType==2" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/text.png" mode="">
							</image>
							<image v-if="changeType==1" style="width: 76rpx;height: 76rpx;" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/voice.png" mode="">
							</image>
						</view>
						<view v-if="changeType==1" class="box-input">
							<textarea auto-height="true" confirm-type="send" :confirm-hold="true" :disable-default-padding="true"
								cursor-spacing="15" :show-confirm-bar="false" :adjust-position="false" @blur="inputBottom=0"
								v-model="content" @confirm="sendEvent"></textarea>
						</view>
						<view v-if="changeType==2" class="box-input box-btn" @touchstart="voiceBegin"
							@touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">
							{{voiceTis}}
						</view>
						<view @click="moreEvent" class="box-add">
							<uni-icons type="plus" color="#000000" size="34"></uni-icons>
						</view>
						<view v-if="changeType==1" class="box-send" @click="sendEvent"> 发送 </view>
					</block>
				</view>

			</view>
			<!-- 录音UI效果 -->
			<view class="record" :class="recording ? '' : 'hidden'">
				<view class="ing" :class="willStop ? 'hidden' : ''">
					<view class="icon luyin2"></view>
				</view>
				<view class="cancel" :class="willStop ? '' : 'hidden'">
					<view class="icon chehui"></view>
				</view>
				<view class="tis" :class="willStop ? 'change' : ''">{{ recordTis }}</view>
			</view>
		</block>
		<block v-else>
			<view class="chat-box chat-flex" :class="{'more-show':moreClass=='more-show','fit-bottom':inputBottom==0}"
				:style="{ bottom: inputBottom + 'px  !important' }">
				<view class="box-switch">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/yuyin.png" mode="">
					</image>
				</view>
				<view class="box-input-diabled">
					<view class="tips">你们还不是好友</view>
				</view>
				<view class="box-upgrade" @click="add_friend"> 添加好友 </view>
			</view>
		</block>
		<!-- 申请查看微信弹出层 -->
		<uni-popup ref="free_wechat" type="center">
			<view class="weixin">
				<view class="weixin-title"> 您的会员权益 </view>
				<!-- <view class="weixin-desc"> 送对方一个小礼物 </view> -->
				<view class="weixin-price">
					<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png" mode=""></image>
				</view>
				<view class="weixin-btn">
					<view class="btn-cancel" @click="$refs['free_wechat'].close()"> 取 消 </view>
					<view class="btn-comfirm" @click="applyFreeWx()">申请查看</view>
				</view>
				<view class="weixin-desc">
					温馨提示：申请查看微信，仍需对方同意方可查看微信号
				</view>
			</view>
		</uni-popup>

		<!-- 添加对方微信弹出层 -->
		<uni-popup ref="weixin" type="center">
			<view class="wx_popup">
				<image class="bg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710326674977862.png" mode=""></image>
				<view class="del_wxpopup" @click="$refs['weixin'].close()">
					<image class="del" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/del.png" mode=""></image>
				</view>
				<view class="popup_title">
					<view class="title_text">
						查看微信是会员特权
					</view>
				</view>
				<view class="popup_lit">
					开通会员可以无限制加微信
				</view>
				<view class="wx_p_content">
					<view class="price">
						<view :class="['price_item','gold_card',price_index==0?'price_active':'']"  @click="priceEvent(0,Issex)">
							<view class="price_type">
								金卡会员
							</view>
							<view class="crown">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/goldcrown.png" mode=""></image>
							</view>
							<view class="price_tit"  v-if="is_first_upgrade">
								{{Issex == '男'?'￥119/月':'￥59/月'}}
								<view class="first_vip">
									首充6折
								</view>
							</view>
							<view v-else class="price_tit">
								{{Issex == '男'?'￥198/月':'￥99/月'}}
							</view>
							<view class="price_lit" v-if="is_first_upgrade" style="text-decoration: line-through;">
								{{Issex == '男'?'￥198/月':'￥99/月'}}
							</view>
							<view class="price_lit" style="opacity: 0;">
								{{Issex == '男'?'￥198/月':'￥99/月'}}
							</view>
							<view class="price_lit">
								免费加好友、加微信
							</view>
							<view class="active_icon"  v-if="price_index==0">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/check.png" mode=""></image>
							</view>
						</view>
						<view :class="['price_item','blak_card',price_index==1?'price_active':'']"  @click="priceEvent(1,Issex)">
							<view class="price_type">
								年卡会员
							</view>
							<view class="crown">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/blackcrown.png" mode=""></image>
							</view>
							<view class="price_tit"  v-if="is_first_upgrade">
								{{Issex == '男'?'￥1188/年':'￥594/年'}}
								<view class="first_vip">
									首充6折
								</view>
							</view>
							<view v-else class="price_tit">
								{{Issex == '男'?'￥1980/年':'￥990/年'}}
							</view>
							<view class="price_lit" v-if="is_first_upgrade" style="text-decoration: line-through;">
								{{Issex == '男'?'￥1980/年':'￥990/年'}}
							</view>
							<view class="price_lit" style="opacity: 0;">
								{{Issex == '男'?'￥1980/年':'￥990/年'}}
							</view>
							<!-- <view class="price_lit" style="opacity: 0;">
								占位
							</view> -->
							<view class="price_lit">
								定制运动
							</view>
							<view class="active_icon" v-if="price_index==1">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/check.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="wx_btn">
						<view class="btn_item gold_btn"  @click="ApplyWXPay1">
							单次付费(200)
						</view>
						<view class="btn_item black_btn" @click="member_upgrade(Issex)">
							开通会员
						</view>
					</view>
					<view class="vip_tips">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104053105741351.png" mode=""></image>
						如果对方拒绝或超过5天未回应，费用将退回平台余额
					</view>
				</view>
			</view>

		</uni-popup>

		<!-- 赠送会员弹窗 -->
		<uni-popup ref="member_gift" type="center">
			<view class="wx_popup send_vip">
				<image class="bg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710326674977862.png" mode=""></image>
				<view class="del_wxpopup" @click="$refs['member_gift'].close()">
					<image class="del" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/del.png" mode=""></image>
				</view>
				<view class="popup_title">
					<view class="title_text">
						赠送会员卡
					</view>
				</view>
				<view class="popup_lit">
					年卡包含金卡所有特权
				</view>
				<view class="wx_p_content">
					<view class="price">
						<view :class="['price_item','gold_card',price_index==0?'price_active':'']"  @click="priceEvent(0)">
							<view class="price_type">
								金卡会员
							</view>
							<view class="crown">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/goldcrown.png" mode=""></image>
							</view>
							<view class="price_tit">
								￥198/月
							</view>

							<view class="price_lit">
								免费加好友、加微信
							</view>
							<view class="active_icon" v-if="price_index==0">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/check.png" mode=""></image>
							</view>
						</view>
						<view :class="['price_item','blak_card',price_index==1?'price_active':'']"  @click="priceEvent(1)" >
							<view class="price_type">
								年卡会员
							</view>
							<view class="crown">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/blackcrown.png" mode=""></image>
							</view>
							<view class="price_tit">
								￥1980/年
							</view>

							<view class="price_lit">
								定制运动
							</view>
							<view class="active_icon"  v-if="price_index==1">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/check.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="vip_time" v-if="false">
						<!-- <view class="time_tit">
							会员时长
						</view> -->
						<view class="time_inp">
							<input type="number" v-model="vipDate" placeholder="输入1-12" @input="vipTime" />
							个月
						</view>
					</view>
					<view class="wx_btn"  @click="send_membercard">
						<view class="btn_item black_btn" style="margin-top: 30rpx;">
							豪爽赠送
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="member_upgrade">
				<view class="weixin-title"> 赠送会员卡<view class="popup-close" @click="$refs['member_gift'].close()">X
					</view>
				</view>
				<view class="weixin-desc"> 黑金卡包含金卡所有特权 </view>
				<view class="member-list">
					<view @click="priceEvent(0)" :class="{active:0==price_index}" key="0" class="member-item">
						<view class="title">
							金卡会员
						</view>
						<view class="price">
							<block v-if="is_first_upgrade">
								<text>￥300</text> <span>元/月</span>
							</block>
							<block v-else>
								<text>￥500</text> <span>元/月</span>
							</block>
						</view>
						<view class="name">
							<block v-if="is_first_upgrade">
								<text>￥500</text> 首充6折
							</block>
						</view>
						<view class="name" @click="nav_to(`/pages/user/apply_member?t=1`)">
							权益介绍
						</view>
						<view class="desc">
							免费加好友，加微信
						</view>
					</view>
					<view @click="priceEvent(1)" :class="{active:1==price_index}" key="1" class="member-item">
						<view class="title">
							黑金卡会员
						</view>
						<view class="price">
							<block v-if="is_first_upgrade">
								<text>￥1200</text> <span>元/月</span>
							</block>
							<block v-else>
								<text>￥2000</text> <span>元/月</span>
							</block>
						</view>
						<view class="name">
							<block v-if="is_first_upgrade">
								<text>￥2000</text> 首充6折
							</block>
						</view>
						<view class="name" @click="nav_to(`/pages/user/apply_member?t=2`)">
							权益介绍
						</view>
						<view class="desc">
							定制球局和线下聚会
						</view>
					</view>
				</view>
				<view class="weixin-btn">
					<view class="btn-upgrade" @click="send_membercard">豪爽赠送</view>
				</view>
			</view> -->
		</uni-popup>

		<uni-popup ref="pay_vip" type="bottom">
			<view class="paybox">
				<view class="pay_tit">
					<view class="tit_icon" style="opacity: 0;">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/del.png" mode=""></image>
					</view>
					<view class="tit">
						会员卡
					</view>
					<view class="tit_icon" @click="$refs.pay_vip.close()">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/del.png" mode=""></image>
					</view>
				</view>
				<view class="vip_type">
					<view class="type_tit">
						会员卡类型
					</view>
					<view class="type_check ">
						<view class="type_item type_active">
							金卡会员
						</view>
						<view class="type_item">
							年卡会员
						</view>
					</view>
				</view>
				<view class="vip_type vip_time">
					<view class="type_tit">
						会员卡时长
					</view>
					<view class="inpbox">
						<input type="number" :value="1" placeholder="请输入1-12" />
						<view class="inp_text">
							个月
						</view>
					</view>

				</view>
				<view class="pay_btn">
					确定
				</view>
			</view>
		</uni-popup>

		<!-- 赠送礼物弹出层 -->
		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">赠送对方礼物</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in gift" :key="i" @click="gift_active=i" class="list-cell"
							:class="{'list-active':i==gift_active}">
							<image class="list-icon" :src="l.Icon?l.Icon:'/static/img/icon_bbt.png'" mode=""></image>
							<view v-if="i!=gift_active" class="list-name"> {{l.Name}} </view>
							<view class="list-price"> ￥{{l.Price}} </view>
							<view v-if="i==gift_active" @click="giftEvent" class="list-btn"> 赠送 </view>
						</view>
					</view>
				</scroll-view>
				<!-- <view class="popup-btn" @click="$refs['gift'].close()">取消</view> -->
			</view>
		</uni-popup>

		<!-- 商城列表 -->
		<uni-popup ref="mall" type="bottom" safeAreaInsetTop>
			<view class="popup-mall">
				<view class="popup-title">赠送对方礼物</view>
				<view class="popup-close" @click="$refs['mall'].close()">
					<u-icon name="close" color="#ffffff" size="20"></u-icon>
				</view>
				<scroll-view class="popup-wrap" :scroll-y="true">
					<view class="popup-mall-list">
						<view class="popup-mall-item" v-for="(item,index) in goodsList" :key="index"
							@click="nav_to(`/pages/mall/goodsInfo?id=${item.ID}`)">
							<image :src="item.Images" mode=""></image>
							<view class="popup-mall-item-title u-line-2">
								{{item.ProductName}}
							</view>
							<view class="popup-mall-item-info">
								<view class="popup-mall-item-info-left">
									<text class="f-24">￥</text>
									<text>{{item.Price}}</text>
								</view>
								<view class="popup-mall-item-info-right" @click.stop.prevent @click="onAddGoods(item)">
									加入礼盒
								</view>
							</view>
						</view>
					</view>

				</scroll-view>
				<view class="popup-btn">
					<view class="popup-btn-img" @click="onGoMallCart">
						<image src="/static/tab/assistant_1.png" mode=""></image>
						<view class="popup-btn-img-num">
							<u-badge bgColor="#e70000" color="#ffffff" max="99" shape="horn" :showZero="true" :value="sum"></u-badge>
						</view>
					</view>
					<view class="popup-btn-btn" @click="$refs['mall'].close()">
						再考虑一下
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	const time = 1000 * 60 * 5;
	import topStatus from '@/components/topStatus/topStatus.vue'
	export default {
		components: {
			topStatus
		},
		computed: {
			...mapState(['msgTimeStamp']),
			// 时间格式
			format_time() {
				return time => {
					return this.$util.dateUtils.format_chat(Math.floor(time / 1000));
				};
			},
			TimeShow(){
				return i =>{
					const arr = [91,92,99,198]
					const next = this.list[i+1]
					if(i>=this.list.length-1) return
					const nextSubType = arr.includes(next.subType)
					const isFriendTime = (next.subType == 199 && this.isFriend) //这个时间消息下一条是提示要加好友并且现在两者已经是好友
					if(nextSubType && Object.keys(this.list[i]).length==3 && next.direction==1  || (isFriendTime && next.direction==0)) return true
					return false
				}
			}
		},
		data() {
			return {
				Issex:null,
				sum: 0, //选中商品数量
				selectGoods: [], //选中商品id数组
				// 商品数组
				goodsList: [],
				convInfo: {}, //对话的人的相关信息
				userID: 0, //用户id
				current_name: '',
				list: [], //对话相关数组
				userList: [], //对话用户们(两个)
				page: 1, //当前页面
				status: 'loading', //状态
				top: 0, //顶部距离
				focus: false, //聚焦对话最底部
				inputBottom: 0, //input框底部
				offset: 340, //  190 
				changeType: 1,
				moreType: false,
				scrollId: 'id',
				moreClass: '',
				content: '',
				isByte: false,
				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsg: {
					i: -1,
					play: -1
				},
				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				voiceTis: '按住 说话',
				recordTis: '手指上滑 取消发送',
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,
				price: 200, //价格
				gift: [], //礼物数组
				gift_active: -1, //当前选中礼物
				lastTime: 0, //最后聊天时间

				userinfo: [], //用户信息

				accept_gift_name: '', //获取礼物的名字
				accept_gift_price: '', //获取礼物的价格

				//是否好友
				isFriend: false,

				price_index: 0,
				member_price: 198,
				wmember_price:99,
				is_first_upgrade: false,

				isMember: true,

				//微信价格
				wx_price: 200,
				is_promotion: 0,

				//会员时长
				vipDate: 1,
				//好友
				friends_:[],
				//微信
				wx_:[],
			};
		},
		onShow() {
			// 触发商品礼物
			uni.$on('customSendMessage', this.customSendMessage)
			// 触发接受或者拒绝商品礼物
			uni.$on('goodsGiftSUb', this.goodsGiftSUb);
			this.friends_ = uni.getStorageSync('friends_') || []
			this.wx_ = uni.getStorageSync('wx_') || []
		},
		async onLoad(e) {
			this.upDateInfo()
			let mf_data = await this.$api.post('/Member/IsFirstUpgrade');
			this.is_first_upgrade = mf_data.data;
			// 聊天对象信息
			this.convInfo = e;
			this.current_name = e.name;
			
			//判断双方是否为好友
			let fri = await this.$api.post('Friend/IsMyFriends', {
				FriendID: this.convInfo.id
			});
			if (fri.data) {
				this.isFriend = true;
			} else {
				this.isFriend = false;
			}
			

			// 判断登录状态
			if (await this.$store.getters.getLoginState) {

				this.userinfo = uni.getStorageSync('user');
				// 赋值用户ID
				this.userID = uni.getStorageSync('user').UserID;
				// 添加页面路径
				await this.$api.post('/Common/Add_ViewPath', {
					Path: 'single_chat',
					Platform: uni.getStorageSync('platform')
				});
				
				

				//加载用户信息
				let res = await this.$api.post('User/GetUserInfo', {
					ID: this.userID
				});
				if (res.data.UserType == '普通用户') {
					this.isMember = true; //暂时放开，任何用户都可聊天
					this.isFriend = true;  //←↑都是历史代码  不知道为什么普通用户直接就是isFriend 是true
					
					//判断是否发送过开通会员信息
					let saleVip
					let arr = uni.getStorageSync('payVip')
					if(!arr){
						uni.setStorageSync('payVip',[this.convInfo.id])
						saleVip = true
					}else{
					 let con = arr.find(item=>this.convInfo.id==item)
					 if(!con){
						 arr.push(this.convInfo.id)
						 uni.setStorageSync('payVip',arr)
						 saleVip = true
					 }else saleVip = false
					}
					
					if(saleVip){
						//发送一条“开通会员”的邀请消息
						this.$im.sendMessage(200, JSON.stringify({
							type: '开通会员',
						}), e.id + '09', 198).then(res => {

						})						
					}
				} else {

					//如果是黑金用户、黑金年卡用户，直接聊天
					if (res.data.UserType == '年卡会员' || res.data.UserType == '黑金年卡会员') {
						this.isFriend = true;
					} else {
						if (this.isFriend == false) {
							//发送一条互相不是好友的消息
							this.$im.sendMessage(200, JSON.stringify({
								type: '提示添加好友',
							}), e.id + '09', 199).then(res => {

							})
						}
					}
					//判断是否发送过送会员信息
					let saleVip
					let arr = uni.getStorageSync('msgNum')
					if(!arr){
						uni.setStorageSync('msgNum',[this.convInfo.id])
						saleVip = true
					}else{
					 let con = arr.find(item=>this.convInfo.id==item)
					 if(!con){
						 arr.push(this.convInfo.id)
						 uni.setStorageSync('msgNum',arr)
						 saleVip = true
					 }else saleVip = false
					}
					
					
					//如果对方不是会员，发送一条“送会员”的邀请消息
					if(saleVip){
						let opp_user = await this.$api.post('User/GetUserInfo', {
							ID: e.id
						});
						
						if (opp_user.data.UserType == '普通用户') {

							this.$im.sendMessage(200, JSON.stringify({
								type: '赠送会员',
							}), e.id + '09', 99).then(res => {

							})
						}
					}
				}

				// 获取对话信息
				this.getMsgList()

				// 获取礼物列表
				this.GetGift()
				// 获取商品列表
				this.GetGoodsList()
			}
			
			

			uni.$on('messageList', res => {
				// console.log('获取消息------', res)
				res.forEach(item => {
					if (item.conversationID == this.convInfo.id + '09') {
						if (!this.lastTime || item.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(item.timestamp)
							})
							this.lastTime = item.timestamp
						}
						/*处理同意添加好友信息*/
						if(item.subType == '97'){
							this.isFriend = true;
						}
						/*处理同意添加好友信息*/
						
						this.list.push(item);
						this.scrollBottom()
					}
				})
				 
			})

			uni.onKeyboardHeightChange(res => {
				this.inputBottom = res.height - 2;
				if (res.height > 0) {
					this.hideDrawer(); //隐藏抽屉
				}
				setTimeout(() => {
					this.offset = 340 + res.height / (uni.upx2px(100) / 100)
					this.scrollBottom();
				}, 5)
			});

			//语音自然播放结束
			this.AUDIO.onEnded(res => {
				this.playMsg = {
					i: -1,
					play: -1
				};
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart(e => {
				this.willStop = false;
				this.recordBegin(e);
			});
			//录音结束事件
			this.RECORDER.onStop(res => {
				this.recordEnd(res);
			});
			// #endif
		},
		onUnload() {
			uni.offKeyboardHeightChange(() => {});
			uni.$off('customSendMessage')
			uni.$off('goodsGiftSUb')
		},
		watch: {
			// msgTimeStamp() {
			// 	console.log('====================================');
			// 	let res = this.$store.getters.getMsgList;
			// 	console.log(res, "-------------消息记录2")
			// 	res.forEach(item => {
			// 		if (item.conversationID == this.convInfo.id) {
			// 			if (!this.lastTime || item.timestamp - this.lastTime > time) {
			// 				this.list.push({
			// 					messageID: Math.random().toString().substr(2, 10),
			// 					subType: 1,
			// 					time: this.format_time(item.timestamp)
			// 				})
			// 				this.lastTime = item.timestamp
			// 			}
			// 			this.list.push(item);
			// 			this.scrollBottom()
			// 		}
			// 	})
			// }
		},
		methods: {
			isFriendFun(id,type){
				if(type=='friends') return !(this.friends_.some(item=>item.msgId==id))
				if(type=='wx') return !(this.wx_.some(item=>item.msgId==id))
			},
			async auditFriendSub(status,fid,msgId,id) {
				console.log('1111');
				console.log(status,fid,msgId,id);
				// let userid = id.slice(0,-2)
				let res = await this.$api.post('/Friend/Audit', { ID: fid, Status: status });
				if(res.data){
					this.isFriend = true
				}
				//直接拉起一个聊天窗口,默认发送双方已是好友消息
				// this.$im.sendMessage(200, JSON.stringify({
				// 	type: 'weixin'
				// }), id + '', 97).then(res => {

				// })
				this.friends_.push({msgId}) 
				uni.setStorageSync('friends_',this.friends_)

			},
			add_friend() {
				this.nav_to(`/pages/user/add_friend?user_id=${this.convInfo.id}`);
			},
			memberUpgarde() {
				this.nav_to('/pages/user/apply_member');
			},
			async ApplyWxPay1() {
				const {
					type,
					id
				} = this.convInfo;
			
				let r_wc = await this.$api.post('Friend/ApplyWechatNo', {
					ToUserID: id
				});
			
				// id=123129&type=0&name=abc
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: this.wx_price,
					EventType: '申请微信',
					EventID: r_wc.data,
					body: '加微信',
					SourcePage: 'single_chat',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
			
				if (pres.data == 0) {
					//已余额支付成功
			
					this.$pv.msg('已申请微信');
					// 关闭添加微信弹出层
					this.$refs['weixin'].close()
			
					this.$im.sendMessage(200, JSON.stringify({
						type: 'weixin',
						Price: 200,
						EventID: r_wc.data
					}), id + '09', 10).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();
					})
			
					return;
				}
			
				let payObj = JSON.parse(pres.data);
				let _this = this;
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {
						// _this.$pv.msg('等待对方同意');
						_this.$refs['weixin'].close()
			
						_this.$im.sendMessage(200, JSON.stringify({
							type: 'weixin',
							Price: 200,
							EventID: r_wc.data
						}), id + '09', 10).then(res => {
							if (!_this.lastTime || res.message.timestamp - _this.lastTime > time) {
								_this.list.push({
									messageID: Math.random().toString().substr(2, 10),
									subType: 1,
									time: _this.format_time(res.message.timestamp)
								})
								_this.lastTime = res.message.timestamp
							}
							_this.list.push(res.message);
							_this.scrollBottom();
						})
					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},
			priceEvent(i,sex='') {
				this.price_index = i;
				if (i == 0) {
					if(sex == '女'){
						this.member_price = 99;
					}else{
						this.member_price = 198;
					}
				} else {
					if(sex == '女'){
						this.member_price = 990;
					}else{
						this.member_price = 1980;
					}
				}
			},
			async applyFreeWx() {
				const {
					type,
					id
				} = this.convInfo;

				//记录一下谁点击了微信
				let r_wc = await this.$api.post('Friend/FreeApplyWechatNo', {
					ToUserID: id
				});

				// 关闭添加微信弹出层
				this.$refs['free_wechat'].close()

				this.$im.sendMessage(200, JSON.stringify({
					type: 'weixin',
					Price: 0,
					EventID: r_wc.data
				}), id + '09', 10).then(res => {
					if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
						this.list.push({
							messageID: Math.random().toString().substr(2, 10),
							subType: 1,
							time: this.format_time(res.message.timestamp)
						})
						this.lastTime = res.message.timestamp
					}
					this.list.push(res.message);
					this.scrollBottom();
				})

			},
			async userUpdate() {
				this.$refs['weixin'].close();
				this.nav_to('/pages/user/apply_member');
			},
			async goodsGiftSUb(i) {

				// 加载
				this.$pv.load()
				// 获取对话对象的信息
				const {
					type,
					id
				} = this.convInfo;
				// 判断是否同意添加(2:不同意,1同意)
				let msg_type = 2

				// 判断自己数据是否有值
				if (i != -1) {
					// msg_type = '我的微信号：' + res.data
					// 修改同意状态(改为同意)
					msg_type = 1
				}
				// 获取对应索引的消息对话数据
				const l = this.list[i]
				// 删除对应索引的消息对话数据
				// this.$im.deleteMessages([l], l.conversationID.toString(), l.conversationType).then((res) => {
				//   console.log(`删除是否同意加微信消息--删除索引(${i})`, res);
				//   // 删除本地对应索引的消息对话数组数据
				//   this.list.splice(i, 1)
				// });
				// 判断是否同意添加微信
				if (msg_type == 2) {
					// 自定义不接收商品礼物
					this.$im.sendMessage(200, JSON.stringify({
						type: 'weixin'
					}), id + '09', 96).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();
					});


				} else {
					// 自定义接收商品礼物
					this.$im.sendMessage(200, JSON.stringify({
						type: 'weixin'
					}), id + '09', 95).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();

					})
				}
				// 结束加载中
				this.$pv.closeLoad()
			},
			//跳转商品礼物接收页面
			ReceivingGifts(e, i) {
				console.log('订单ID', JSON.parse(e).id)
				// let orderID=JSON.parse(e).id
				let order = JSON.stringify({
					orderID: JSON.parse(e).id,
					index: i
				})
				uni.navigateTo({
					url: '/pages/mall/giftReceive?order=' + encodeURIComponent(order)
				});
				// this.nav_to(`/pages/mall/giftReceive?order=&{order}`)
			},
			//生成商品礼物自定义消息
			customSendMessage(e) {
				const {
					type,
					id
				} = this.convInfo;
				this.sum = 0
				this.selectGoods = []
				let _this = this
				_this.$im.sendMessage(200, JSON.stringify(e), id + '09', 13).then(res => {
					if (!_this.lastTime || res.message.timestamp - _this.lastTime > time) {
						_this.list.push({
							messageID: Math.random().toString().substr(2, 10),
							subType: 1,
							time: _this.format_time(res.message.timestamp)
						})
						_this.lastTime = res.message.timestamp
					}
					_this.list.push(res.message);
					_this.scrollBottom();
				})
			},
			// 跳转购物车页面
			onGoMallCart() {
				if (this.sum <= 0) {
					this.$pv.msg('请选择礼物');
					return;
				}
				this.$refs['mall'].close()
				this.nav_to(
					`/pages/mall/cart?goodsList=${JSON.stringify(this.selectGoods)}&AnchorID=${this.convInfo.id}`)
			},
			// 添加商品到购物车
			onAddGoods(item) {
				this.sum++
				let find = this.selectGoods.find(x => x.ProductNo === item.ProductNo)
				if (!find) {
					this.$set(item, 'sum', 1)
					this.selectGoods.push(item)
				} else {
					find.sum += 1
				}
				console.log('选中商品', this.selectGoods)
			},
			//  点击跳转对应的用户页面
			view_user(id) {
				let ID = id.slice(0,-2)
				this.nav_to('/pages/user/user_visitor?id=' + ID)
			},
			async getMsgList() {
				this.$im.queryUsersInfo([this.convInfo.id + '09', this.userID + '09']).then(list => {
					this.userList = list;
					// console.log('-----==');
					// console.log(this.userList);
				})
				this.$im.msgHistory(this.convInfo.id+'09', 0).then(res => {

					this.formatList(res.messageList)
				})

				return true;
			},
			formatList(list) {
				let l = [];
				for (let i = 0; i < list.length; i++) {
					if (!this.lastTime || list[i].timestamp - this.lastTime > time) {
						l.push({
							messageID: Math.random().toString().substr(2, 10),
							subType: 1,
							time: this.format_time(list[i].timestamp)
						})
						this.lastTime = list[i].timestamp
					}
					l.push(list[i])
				}
				for(let i=0;i<l.length;i++){
					for(let j=i+1;j<l.length;){
						if(l[i].subType ==l[j].subType){
							l.splice(j,1)
						}else{
							j++
						}
					}
				}
				this.list = l
				console.log('=======+++');
				console.log(this.list );
				this.$nextTick(() => {
					this.scrollBottom();
				});
			},
			playVoice(fileDownloadUrl, i) {
				if (this.playMsg.i == i) {
					if (this.playMsg.play == 0) {
						this.playMsg = {
							i,
							play: 1
						};
						return this.AUDIO.pause();
					} else {
						this.playMsg = {
							i,
							play: 0
						};
						return this.AUDIO.play();
					}
				}
				this.playMsg = {
					i,
					play: 0
				};
				const l = this.list[i]
				this.AUDIO.src = fileDownloadUrl;
				console.log(fileDownloadUrl);
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			// 获取对应的头像
			getChatAvatar(userID) {
				let url = ""
				this.userList.forEach(item => {
					if (item.baseInfo.userID == userID) {
						url = item.userAvatarUrl
					}
				});
				return url;
			},
			// 预览图片
			showPic(url) {
				uni.previewImage({
					indicator: 'none',
					current: url,
					urls: [url]
				});
			},
			// 发生消息相关逻辑
			async sendEvent() {

				this.$util.throttle(() => {
					const {
						type,
						id
					} = this.convInfo;

					if (this.content == '') {
						this.$pv.msg('发送内容不能为空');
						return;
					}

					let is_end = true;
					
					
					
					if (this.userinfo.UserType == '普通用户' || this.userinfo.UserType == '体验会员') {

						//========判断是否手机号码
						//需要去除中间空格内容
						let phone = this.content.replace(/\s/g, '');
						if (this.isPhone(phone)) {

							this.$im.sendMessage(200, JSON.stringify({
								type: 'weixin'
							}), id + '09', 92).then(res => {
								console.log('92------------', res)
								if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
									this.list.push({
										messageID: Math.random().toString().substr(2, 10),
										subType: 1,
										time: this.format_time(res.message.timestamp)
									})
									this.lastTime = res.message.timestamp
								}
								this.list.push(res.message);
								this.scrollBottom();
							});

							this.$refs['weixin'].open();

							return;
						}


						//============违禁词处理===============
						let words = ['微信', 'VX', 'weixin', 'wei', 'weix', 'wxin', 'xin', 'V', '加V', '加微', 'WECHAT', 'WX',
							'手机号', '手机', '联系方式', '电话', '联系电话', '联系',
							'电联', 'mobile', 'phone'
						];


						words.forEach((w, i) => {
							//去掉字符中的空格
							w = w.replace(/\s/g, '');

							if (this.content.toUpperCase().indexOf(w) >= 0) {

								this.$im.sendMessage(200, JSON.stringify({
									type: 'weixin'
								}), id + '09', 91).then(res => {

									if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
										this.list.push({
											messageID: Math.random().toString().substr(2, 10),
											subType: 1,
											time: this.format_time(res.message.timestamp)
										})
										this.lastTime = res.message.timestamp
									}
									this.list.push(res.message);
									this.scrollBottom();
								});

								this.$refs['weixin'].open();

								is_end = false;
							}
						});
					}


					if (!is_end) return;
					//=============违禁词处理结束=============
					let not = true
					if(this.userinfo.UserType == '普通用户'){
						//未开通会员只能发送一条信息
						let saleVip
						let arr = uni.getStorageSync('notVip')
						if(!arr){
							uni.setStorageSync('notVip',[this.convInfo.id])
							saleVip = true
						}else{
						 let con = arr.find(item=>this.convInfo.id==item)
						 if(!con){
							 arr.push(this.convInfo.id)
							 uni.setStorageSync('notVip',arr)
							 saleVip = true
						 }else saleVip = false
						}
						let that = this
						if(!saleVip){
							//发送一条“开通会员”的邀请消息
							this.$im.sendMessage(200, JSON.stringify({
								type: '开通会员',
							}), that.convInfo.id + '09', 198).then(res => {
								if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
									this.list.push({
										messageID: Math.random().toString().substr(2, 10),
										subType: 1,
										time: this.format_time(res.message.timestamp)
									})
									this.lastTime = res.message.timestamp
								}
								this.list.push(res.message);
								
								this.scrollBottom()
								this.content = '';
							})
							not = false
						}
					}
					if(!not) return
					
					//正常发送聊天信息
					const textMsg = this.content;
					//传进来的converId是去掉拼接字符串的，所以发送消息的时候要拼回去
					this.$im.sendChatMessage(type, textMsg, id + '09', this.isByte).then((res) => {

						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);

						this.scrollBottom()
						this.content = '';
						this.focus = true
					});
					

					//发送消息，如果用户不在线，则发送离线消息
					this.$api.post('MessageNotify/SendAppIMMessage', {
						UserID: id,
						Content: textMsg
					});
				});


			},
			// 获取礼物列表
			async GetGift() {
				let res = await this.$api.post('Friend/GetGift');
				this.gift = res.data || [];
			},
			// 获取商品列表
			async GetGoodsList() {
				let res = await this.$api.post('Products/PageList', {
					PageIndex: 1,
					PageSize: 10
				});
				this.goodsList = res.data || [];
			},
			// 赠送礼物的相关逻辑
			async giftEvent() {
				const {
					type,
					id
				} = this.convInfo;
				// 当前选中礼物
				const g = this.gift[this.gift_active];

				const MessageId = Math.random().toString().substr(2, 10);

				const l = {
					Price: g.Price,
					Name: g.Name,
					OutMessageId: MessageId,
					Done: 0,
					Icon: g.Icon
				}
				let res_gift = await this.$api.post('Friend/SendGift', {
					Price: g.Price,
					GiftID: g.ID,
					GiftName: g.Name,
					GiftQty: 1,
					ToUserID: id,
					EventID: g.ID,
					SendType: '赠送礼物',
					MessageId: MessageId
				});
				console.log('++++++=');
				console.log(res_gift);
				console.log(JSON.stringify(res_gift.data));
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: l.Price,
					EventType: '赠送礼物',
					EventID: JSON.stringify(res_gift.data),
					body: l.Name,
					SourcePage: 'single_chat',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					// 提示赠送成功
					this.$pv.msg('礼物赠送成功');
					// 关闭礼物弹出层
					this.$refs['gift'].close()
					// 自定义对话内容(自定义消息,JSON(消息),id,判断条件) todo  需要处理id + 09吗？
					this.$im.sendMessage(200, JSON.stringify(l), id+'09', 12).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: MessageId,
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}

						this.list.push(res.message);

						this.scrollBottom();

					})

					return;
				}

				// 支付成功返回的内容
				let payObj = JSON.parse(pres.data);
				let _this = this;
				// 调用uni支付API
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {
						// _this.$pv.msg('等待对方同意');
						// 关闭礼物弹出层  
						//todo  需要处理id + 09吗？
						_this.$refs['gift'].close()
						_this.$im.sendMessage(200, JSON.stringify(l), id + '09', 12).then(res => {
							if (!_this.lastTime || res.message.timestamp - _this.lastTime > time) {
								_this.list.push({
									messageID: Math.random().toString().substr(2, 10),
									subType: 1,
									time: _this.format_time(res.message.timestamp)
								})
								_this.lastTime = res.message.timestamp
							}
							_this.list.push(res.message);
							_this.scrollBottom();
						})
					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},

			async addWechat() {

				//判断加微信是否有优惠
				let wx_pro = await this.$api.post('Member/GetPromotion', {
					Item: '加微信'
				});
				if (wx_pro.data) {
					this.wx_price = wx_pro.data.Promotion;
					this.is_promotion = wx_pro.data.IsPromotion == 1 ? true : false;
				}


				//记录一下谁点击了微信
				let res = await this.$api.post('Friend/ViewWechatNo', {
					ToUserID: this.ID
				});

				if (this.userinfo.UserType == '普通用户' || this.userinfo.UserType == '体验会员') {
					//直接拉起送礼物行为
					this.$refs['weixin'].open();
				} else {
					this.$refs['free_wechat'].open();
				}
			},
			async member_upgrade(sex) {
				//升级会员

				let fee = this.member_price;
				if (this.is_first_upgrade){
					fee = this.member_price * 0.6;
				}
				if(sex == '女' && this.is_first_upgrade && this.price_index == 0){
					fee = this.wmember_price *0.6
				}
				// id=123129&type=0&name=abc
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: fee,
					EventType: '会员升级',
					EventID: 0,
					body: this.price_index == 0 ? '金卡会员' : '年卡会员',
					SourcePage: 'single_chat',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});

				if (pres.data == 0) {
					//已余额支付成功

					this.$pv.msg('会员开通成功');
					// 关闭添加微信弹出层
					this.$refs['weixin'].close();

					return;
				}

				let payObj = JSON.parse(pres.data);
				console.log(payObj);
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {
						// _this.$pv.msg('等待对方同意');
						_this.$refs['weixin'].close();


						_this.$pv.msg('会员开通成功');

						setTimeout(() => {
							_this.upDateInfo();
						}, 500);

					},
					fail(err) {
						console.log(err);
						_this.$pv.msg('支付失败');
					}
				});
			},
			async ApplyWXPay1(){
				const {
					type,
					id
				} = this.convInfo;

				let r_wc = await this.$api.post('Friend/ApplyWechatNo', {
					ToUserID: id
				});

				// id=123129&type=0&name=abc
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: this.wx_price,
					EventType: '申请微信',
					EventID: r_wc.data,
					body: '加微信',
					SourcePage: 'single_chat',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});

				if (pres.data == 0) {
					//已余额支付成功

					this.$pv.msg('礼物赠送成功');
					// 关闭添加微信弹出层
					this.$refs['weixin'].close()

					this.$im.sendMessage(200, JSON.stringify({
						type: 'weixin',
						Price: 200,
						EventID: r_wc.data
					}), id + '09', 10).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();
					})

					return;
				}

				let payObj = JSON.parse(pres.data);
				let _this = this;
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {
						// _this.$pv.msg('等待对方同意');
						_this.$refs['weixin'].close()

						_this.$im.sendMessage(200, JSON.stringify({
							type: 'weixin',
							Price: 200,
							EventID: r_wc.data
						}), id + '09', 10).then(res => {
							if (!_this.lastTime || res.message.timestamp - _this.lastTime > time) {
								_this.list.push({
									messageID: Math.random().toString().substr(2, 10),
									subType: 1,
									time: _this.format_time(res.message.timestamp)
								})
								_this.lastTime = res.message.timestamp
							}
							_this.list.push(res.message);
							_this.scrollBottom();
						})
					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},
			open_user() {
				this.nav_to('/pages/user/user_visitor?id=' + this.convInfo.id);
			},
			async send_membercard() {
				//赠送会员
				const {
					type,
					id
				} = this.convInfo;

				let fee = this.member_price;
				let member_level = this.price_index == 0 ? '金卡会员' : '年卡会员';

				// id=123129&type=0&name=abc
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: fee,
					EventType: '赠送会员',
					EventID: id,
					body: member_level,
					SourcePage: 'single_chat',
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app",
					// #endif
				});

				if (pres.data == 0) {
					//已余额支付成功

					this.$pv.msg('会员赠送成功');

					// 关闭弹出层
					this.$refs['member_gift'].close();

					this.$im.sendMessage(200, JSON.stringify({
						type: 'weixin',
						ProductName: member_level
					}), id + '09', 98).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();
					})

					return;
				}

				let payObj = JSON.parse(pres.data);
				console.log(payObj);
				let _this = this;
				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {

						_this.$pv.msg('会员赠送成功');

						// 关闭弹出层
						_this.$refs['member_gift'].close();

						_this.$im.sendMessage(200, JSON.stringify({
							type: 'weixin',
							ProductName: member_level
						}), id + '09', 98).then(res => {
							if (!_this.lastTime || res.message.timestamp - _this.lastTime > time) {
								_this.list.push({
									messageID: Math.random().toString().substr(2, 10),
									subType: 1,
									time: _this.format_time(res.message.timestamp)
								})
								_this.lastTime = res.message.timestamp
							}
							_this.list.push(res.message);
							_this.scrollBottom();
						})

					},
					fail(err) {
						console.log(err);
						_this.$pv.msg('支付失败');
					}
				});
			},
			async upDateInfo() {
				let res = await this.$api.post('User/GetUserInfo', {
					ID: uni.getStorageSync('user').UserID
				});
				let user = res.data;
				user.UserID = res.data.ID;
				this.Issex = res.data.Sex
				console.log('000000000');
				console.log(this.Issex);
				uni.setStorageSync('user', user);
				this.$store.commit('setUser', user);

			},
			
			// 添加微信相关处理
			async wxSub(Status, i, eid, msgId) {
				// 加载
				this.$pv.load();

				let _this = this;

				// 获取对话对象的信息
				const {
					type,
					id
				} = this.convInfo;
				// 获取自己相关的数据
				let res = await this.$api.post('Friend/AuditWechatNo', {
					Status: Status,
					UserID: id,
					ID: eid
				});



				// 判断是否同意添加(2:不同意,1同意)
				let msg_type = 2
				// 没有设置微信号
				if (res.data == '-99') {
					uni.showModal({
						title: '温馨提示',
						content: '您未设置微信，请先设置才能领取该礼物',
						cancelText: '取消',
						confirmText: "去设置",
						success: function(res) {
							if (res.confirm) {
								_this.nav_to('/pages/user/user_edit');
							} else if (res.cancel) {
								//_this.nav_to('/pages/user/apply_member');
							}
						}
					});

					// 结束加载中
					this.$pv.closeLoad();
					return;
				}
				// 判断自己数据是否有值
				if (Status == 1) {
					// msg_type = '我的微信号：' + res.data
					// 修改同意状态(改为同意)
					msg_type = 1
				} else {
					msg_type = 2
				}
				
				
				
				// 获取对应索引的消息对话数据
				const l = this.list[i]
				// 删除对应索引的消息对话数据
				this.$im.deleteMessages([l], l.conversationID.toString(), l.conversationType).then((res) => {

					console.log(`删除是否同意加微信消息--删除索引(${i})`, res);
					// 删除本地对应索引的消息对话数组数据
					this.list.splice(i, 1)
				});
				// 判断是否同意添加微信
				if (msg_type == 2) {
					// 自定义不同意添加微信消息对象
					this.$im.sendMessage(200, JSON.stringify({
						type: 'weixin'
					}), id + '09', 93).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();
					});


				} else {
					// 自定义同意添加微信消息对象
					this.$im.sendMessage(200, res.data, id + '09', 11).then(res => {
						if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
							this.list.push({
								messageID: Math.random().toString().substr(2, 10),
								subType: 1,
								time: this.format_time(res.message.timestamp)
							})
							this.lastTime = res.message.timestamp
						}
						this.list.push(res.message);
						this.scrollBottom();

					})
				}
				
				this.wx_.push({msgId})
				uni.setStorageSync('wx_',this.wx_)
				// 结束加载中
				this.$pv.closeLoad()
			},
			// 点击同意接收赠送礼物相关逻辑
			async doGift(Status, i) {
				// 加载
				this.$pv.load()
				const {
					type,
					id
				} = this.convInfo;

				// 获取对应索引的消息对话数据
				const l = this.list[i];

				// 获取赠送礼物相关信息
				let res = await this.$api.post('Friend/AuditChatGift', {
					Status: Status,
					MessageId: JSON.parse(l.message).OutMessageId
				});

				if (!res.data) return this.$pv.msg('已经领取过啦');

				//组装新的消息
				const n_l = {
					Price: res.data.Price,
					Name: res.data.GiftName,
					Icon: res.data.GiftIcon,
					Done: 1
				};

				// 删除对应索引的消息对话数据
				// this.$im.deleteMessages([l], l.conversationID.toString(), l.conversationType).then((res) => {
				// 	// 删除本地对应索引的消息对话数组数据
				// 	this.list.splice(i, 1)
				// });

				//播放音乐
				this.playScoreAddAudio();


				// 自定义同意接收礼物的对话消息
				//拼接 09
				this.$im.sendMessage(200, JSON.stringify(n_l), id + '09', 94).then(res => {
					if (!this.lastTime || res.message.timestamp - this.lastTime > time) {
						this.list.push({
							messageID: Math.random().toString().substr(2, 10),
							subType: 1,
							time: this.format_time(res.message.timestamp)
						})
						this.lastTime = res.message.timestamp
					}
					this.list.push(res.message);
					this.scrollBottom();
				});



				// 结束加载中
				this.$pv.closeLoad()
			},
			callEvent(roomType) {
				// #ifdef MP-WEIXIN
				this.$store.dispatch('chat/create', {
					roomType,
					chat_uuid: this.chat_uuid
				})
				// #endif
				return
				const options = {
					groupID: 'myGroups',
					userIDList: ['APP182'],
					callMediaType: 1, // 语音通话(callMediaType = 1)、视频通话(callMediaType = 2)
				};
				uni.$TUICallKit.groupCall(options, (res) => {
					console.log(res);
				});
			},
			changeEvent() {
				this.changeType = this.changeType == 1 ? 2 : 1
				if (this.changeType == 2) {
					this.hideDrawer();
				}
			},
			moreEvent() {
				this.moreType = this.moreType ? false : true
				if (this.moreType) {
					this.changeType = 1
					const stime = this.inputBottom > 0 ? 100 : 1
					setTimeout(() => {
						this.openDrawer();
					}, stime)
				} else {
					this.hideDrawer();
				}
			},
			scrollBottom() {
				if (this.list.length < 2) return
				let n = this.list.length
				this.scrollId = 'scroll' + this.list[n - 2].messageID
				setTimeout(() => {
					this.scrollId = 'scroll' + this.list[n - 1].messageID
				}, 10)
			},
			openDrawer() {
				this.moreClass = 'more-show';

				this.offset = 340 + 320;
				this.scrollBottom();
			},
			// 隐藏抽屉
			hideDrawer() {
				this.moreClass = '';
				this.moreType = false;
				this.offset = 340;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				if (await this.getMsgList()) {
					uni.$emit('triggered');
					this._freshing = false;
				}
			},
			showMore() {
				if (this.hideMore) {
					this.hideMore = false;
					this.openDrawer();
				} else {
					this.hideDrawer();
				}
			},
			getImage(type) {
				this.hideDrawer();
				const _this = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], // 从相册选择
					async success(res) {
						// const imgs = await _this.$upload(res.tempFilePaths[0]);
						_this.$pv.load()
						const file = res.tempFiles[0];
						let localPath = file;
						// #ifdef MP-WEIXIN
						localPath = file.path;
						// #endif
						// #ifdef APP-PLUS
						localPath = plus.io.convertLocalFileSystemURL(file.path);
						// #endif
						_this.$im.sendMediaMessage({
								fileLocalPath: localPath,
								fileName: file.name || localPath.replace(/(wxfile)|(https?):\/\//, ''),
								fileSize: file.size,
								type: 11,
							},
							_this.convInfo.id +'09', 0, {},
							(message, currentSize, totalSize) => {
								console.warn('file process', {
									message,
									currentSize,
									totalSize
								});
							},
						).then(res => {
							console.log(res.message, "---------look");
							if (!_this.lastTime || res.message.timestamp - _this.lastTime > time) {
								_this.list.push({
									messageID: Math.random().toString().substr(2, 10),
									subType: 1,
									time: _this.format_time(res.message.timestamp)
								})
								_this.lastTime = res.message.timestamp
							}
							_this.list.push(res.message);
							_this.scrollBottom()
							_this.$pv.closeLoad()
						})
					}
				});
			},
			setPicSize(content) {
				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFill方式。
				let maxW = uni.upx2px(350); //350是定义消息图片最大宽度
				let maxH = uni.upx2px(350); //350是定义消息图片最大高度
				if (content.w > maxW || content.h > maxH) {
					let scale = content.w / content.h;
					content.w = scale > 1 ? maxW : maxH * scale;
					content.h = scale > 1 ? maxW / scale : maxH;
				}
				return content;
			},
			// 复制微信号
			copy(text) {
				// this.resData.WechatNo;
				let _this = this;
				uni.setClipboardData({
					data: text,
					success: function() {
						// _this.$pv.msg('复制')
					}
				});
			},
			// 录音开始
			voiceBegin(e) {
				if (e.touches.length > 1) {
					return;
				}
				this.initPoint.Y = e.touches[0].clientY;
				this.initPoint.identifier = e.touches[0].identifier;
				this.RECORDER.start({
					format: 'mp3'
				}); //录音开始,
			},
			//录音开始UI效果
			recordBegin(e) {
				this.recording = true;
				this.voiceTis = '松开 结束';
				this.time = new Date().getTime();
				this.recordLength = 0;
				this.recordTimer = setInterval(() => {
					this.recordLength++;
					if (this.recordLength >= 60) {
						this.voiceEnd()
					}
				}, 1000);
			},
			// 录音被打断
			voiceCancel() {
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送';
				this.willStop = true; //不发送录音
				this.RECORDER.stop(); //录音结束
			},
			// 录音中(判断是否触发上滑取消发送)
			voiceIng(e) {
				if (!this.recording) {
					return;
				}
				let touche = e.touches[0];
				//上滑一个导航栏的高度触发上滑取消发送
				if (this.initPoint.Y - touche.clientY >= uni.upx2px(100)) {
					this.willStop = true;
					this.recordTis = '松开手指 取消发送';
				} else {
					this.willStop = false;
					this.recordTis = '手指上滑 取消发送';
				}
			},
			// 结束录音
			voiceEnd(e) {
				if (!this.recording) {
					return;
				}
				this.recording = false;
				this.voiceTis = '按住 说话';
				this.recordTis = '手指上滑 取消发送';
				if (this.recordLength <= 0) {
					this.$pv.msg('说话时间太短')
					return
				}
				this.RECORDER.stop(); //录音结束
			},
			//录音结束(回调文件)
			async recordEnd(e) {
				const that = this;
				clearInterval(that.recordTimer);
				if (!that.willStop && parseInt(that.recordTimer) > 1) {
					let fileDownloadUrl = await that.uploading(e.tempFilePath);
					that.$im.sendMediaMessage({
							fileLocalPath: e.tempFilePath,
							fileDownloadUrl: fileDownloadUrl,
							fileSize: that.recordLength,
							type: 13,
						},
						that.convInfo.id + '09', 0, {},
						(message, currentSize, totalSize) => {
							console.warn('file process', {
								message,
								currentSize,
								totalSize
							});
						},
					).then(res => {
						console.log(res.message, "---------look");
						that.list.push(res.message);
						that.scrollBottom()
					})
					// const url = await that.$upload(e.tempFilePath);
					// that.$store.dispatch('socket/send', {
					// 	event: 'chat',
					// 	data: {
					// 		chat_uuid: that.chat_uuid,
					// 		msg_type: "voice",
					// 		content: JSON.stringify({
					// 			url: url,
					// 			length: that.recordLength,
					// 		})
					// 	}
					// })
				}
				this.willStop = false;
			},
			async uploading(url, tempKey) {
				let _this = this;
				let r = await this.$api.upload(
					'/Community/Upload', {
						path: url
					},
					pro => {

					}
				);
				return r;
			},
			// 140-400
			getWidth(length) {
				const len = length >= 50 ? 14 : length >= 40 ? 13 : length >= 30 ? 12 : length >= 20 ? 11 : length >= 10 ?
					10 :
					length
				return 140 + 15 * len
			},
			vipTime(e) {
				console.log(e.detail.value);
				const inputRule = /^(0+)|[^\d]+/g;
				this.$nextTick(() => {
					this.vipDate = e.detail.value.replace(inputRule, '')
				})
				// if(num<1 || num>12){
				// 	this.vipDate = 1
				// 	e.detail.value = 1
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F6F6;
	}
	.blak_card{
		width: 264rpx;
	}
	view {
		box-sizing: border-box;
	}

	.scroll {
		height: calc(100vh - 100rpx);
		// transition: all 0.05s linear;
	}

	.tabs {
		height: 44px;
	}

	.page_top {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		box-sizing: border-box;
		background: #fff;
		z-index: 999999;

		.tabs {
			padding-left: 40rpx;
			display: flex;
			align-items: center;

			image {
				width: 24rpx;
				height: 36rpx;
			}

			.name {
				font-size: 32rpx;
				color: #333333;
				padding-left: 20rpx;
				// width: 200rpx;
			}

			.onlin {

				width: 120rpx;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 8rpx;
				padding: 5rpx;
				box-sizing: border-box;
				background: #0D0D0D;
				color: #fff;
				font-size: 28rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;

			}

			.app_onlin {
				position: absolute;
				right: 20rpx;
				width: 138rpx;
				height: 44rpx;
				line-height: 44rpx;
				border-radius: 10rpx;
				padding: 5rpx;
				box-sizing: border-box;
				background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
				color: #000;
				font-size: 28rpx;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;


			}
		}
	}

	.chat-more {
		&.more-show {
			transform: translate3d(0, -320rpx, 0);
		}

		width: 100%;
		height: 320rpx;
		padding: 10rpx 20rpx 80rpx;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		position: fixed;
		bottom: -320rpx;
		background-color: #EEEFF1;
		z-index: 20;
		transition: all 0.08s linear;

		.chat-cell {
			width: 25%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			position: relative;
			margin-bottom: 20rpx;

			.chat-icon {
				width: 90rpx;
				height: 90rpx;
				background-color: #fff;
				border-radius: 15rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 55rpx;
					height: 55rpx;
				}
			}

			text {
				color: #181818;
				font-size: 28rpx;
				margin-top: 10rpx;
			}

			.chat-member {
				padding: 2rpx 8rpx;
				color: #e64c73;
				border: 2rpx solid #e64c73;
				position: absolute;
				right: 0;
				top: -7rpx;
				font-size: 18rpx;
				border-radius: 4rpx;
				line-height: 32rpx;
				background-color: #e55252;
				color: #ffffff;
			}
		}
	}

	.chat-box {
		width: 100%;
		// display: flex;
		align-items: flex-start;
		padding: 5rpx 30rpx;
		position: fixed;
		bottom: 0;
		background-color: #EEEFF1;

		&.more-show {
			transform: translate3d(0, -320rpx, 0);
		}

		transition: all 0.08s linear;

		.tips {

			width: 70%;
			//color: #ff557f;
			font-size: 32rpx;
			height: 67rpx;
			line-height: 67rpx;
			text-align: center
		}

		.box-switch {
			width: 100rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.box-input {
			flex: 1;
			margin: 15rpx 10rpx;
			min-height: 70rpx;
			display: flex;
			background: #FFF;
			border-radius: 10rpx;
			padding: 18rpx 20rpx;

			&.box-btn {
				padding: 0;
				align-items: center;
				justify-content: center;
				color: #000;
				font-size: 32rpx;
			}

			textarea {
				width: 100%;
				max-height: 400rpx;
				min-height: 32rpx;
				line-height: 34rpx;
				font-size: 28rpx;
				color: #000;
			}

			.tips {
				//color: #ff557f;
			}
		}

		.box-input-diabled {
			flex: 1;
			margin: 15rpx 10rpx;
			min-height: 70rpx;
			display: flex;
			background: #FFF;
			border-radius: 10rpx;

			.tips {
				//color: #ff557f;
			}
		}

		.box-add {
			width: 70rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.box-send {
			width: 100rpx;
			height: 68rpx;
			margin-top: 17rpx;
			margin-left: 15rpx;
			font-size: 24rpx;
			color: #333333;
			background: #fff;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.box-upgrade {
			width: 140rpx;
			height: 68rpx;
			margin-top: 17rpx;
			margin-left: 15rpx;
			font-size: 24rpx;
			color: #4C310C;
			background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.chat-flex{
		display: flex;
	}


	.hidden {
		display: none !important;
	}

	.record {
		width: 40vw;
		height: 40vw;
		position: fixed;
		top: 55%;
		left: 30%;
		background-color: rgba(0, 0, 0, 0.6);
		border-radius: 20rpx;

		.ing {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			// 模拟录音音效动画
			@keyframes volatility {
				0% {
					background-position: 0% 130%;
				}

				20% {
					background-position: 0% 150%;
				}

				30% {
					background-position: 0% 155%;
				}

				40% {
					background-position: 0% 150%;
				}

				50% {
					background-position: 0% 145%;
				}

				70% {
					background-position: 0% 150%;
				}

				80% {
					background-position: 0% 155%;
				}

				90% {
					background-position: 0% 140%;
				}

				100% {
					background-position: 0% 135%;
				}
			}

			.icon {
				background-image: linear-gradient(to bottom, #f09b37, #fff 50%);
				background-size: 100% 200%;
				animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-size: 150rpx;
				color: #f09b37;
			}
		}

		.cancel {
			width: 100%;
			height: 30vw;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon {
				color: #fff;
				font-size: 150rpx;
			}
		}

		.tis {
			width: 100%;
			height: 10vw;
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #fff;

			&.change {
				color: #f09b37;
			}
		}
	}

	@font-face {
		font-family: 'HMfont-home';
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAn8AAsAAAAAE1wAAAmvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFDAqWYJI9ATYCJANACyIABCAFhFUHgV8bThBRlFFWNdkXBXbDsSFQq221McNWrxUbYqGhiTju98MTeXqNh/9fo90388cEMe0bwSOJRIjavZIgESqnE5J5JqQVDZH/XdNfoHSAjqKqRsA+Tf/Ruya33E/bkdHsJtycY2XWAGbM5oenzf173A3lHrEilsmMbu74Y5VmYtxpgza9DMxkWL0gfjGbGRE54AL2f2ut3h2u8Q7RaZRCjDPLIv8cfAUR30MtEUWbSReVJkk0RB4lWWkNg7WVA1sBKmIUdr0uzibQOmxA4vrWwQXkJUweKHPfdwXkA+FSik2o1aVizyTegEKdvWINwGv59bEGY9GeTJFjW95pswIrzz3LYi//0O4JEaDrY3DZjxwXgUR8V3IfIeXARaloVRXT3mK/tsi3LubcJfese8l96Xbd1l1ve2z7eJp5lv3zB7URSdJNYd3Dfm7UUxxkGu0sLFcbVEa5pP3D6/QmokQw3OGzfJp/2kBkLJYQDYuziJbFJUSweIkoWXQRNYuEGFi0BLzFOhAjS4+InKUPRGI5I2a+kg7VSWUGoXoos2BNmGIWexwFroD8IUD6C1A9lYp8F3ClwsFgcgPdNpN08v1czkEOJ4aeieaC3QyVfb9PX2kbn9/0CwTeNAm79H1Kc2x3i9C7LcEZtMSLfE6T4aM+YWOm06dZ5cm9I+xoYw+rqGlScKKlHytu9h6Dw0E5nXK7nbTZknT1jFldR9cuzNMz9Srf7FydqpYW5mRr6Dq1OC9HqzYzoiw1cjohV2tX1Ji1K9bSdVkEbaxS1xQwpmpVpUFheyyzPyGdbXKHexkByib+vtgeK1X75xKqWl+grUNIbRZDXT31tBMiPZAyF0KmniCQhSgACkh5+gIxtvTS/si+VjbAuY6SMdCzbqInzwkjk5ENzMCkNv+ghQQ0qSSAUGmAMQoBozoAIrUe6qpzM+tma1T1jDgvVzdBWcIcLT170njGQU3cCpnUTSdkHH3ltwPHpKotTIP6HH12Lvd4czCWgbJYhY1U5ddlTCICSs1is0in8tXExk7VVRuMQhIQGgOtFcolPmMkIqDVduTGEOn1jI4gFERmSUsv3rGmoKUEQLITLUyzqpFukq8T6U+omVQsT8XHxsnipPEyBAlKNmkNMlMJgOT5Tpsoo2RGP3lOTQyk5GRBgJKw2WQsarWzSa1aLF/+UBk2PkA3wEkBM/RwOLJ0ORWiVCR3YYAAFyIlAdaNqEnmh0sTqOsAq97R85Jt+HGHrNKWgDHmxOPxumKmRGzudayPtogu9D2Zx688C3D6XJSgpgF6MJbomdtyOYBgcXOGSgMAPXqy+F11pMYHlFLCkkKM0S1T+U5SN0Ynh39SxcxmTPNHrTFIuieyxYgZXSDUAPpLLT2ZciVvihOh05k+JIAjoL7HtNsVFc5Rl+1hgAAIlNqGX3GEK0llMm0nZUdmhQzymg3Q9j6yO4FQsmqtQbXmZ+z+sOynUrt3nmbeXu3MYW9f8y38128LpWAVeyLMz4cTORbEDPYKHU19Oyx0OF12GIhfEx+/RRIm2RzPeIPE2yYRM7HBWBx+GvANWXAlMYcmWriz1/Tt2bk+jq7CdOzMu5zsn3zZXwg2Gu14YCBuh3NggN0DI8BbJpCXZb2I4xh+kdAmbU0IA6HYquya81nqYSk87Xgi35ur4HnxZWEvnoLrzbOEjHmJiY2JjV6I8c4ynSEsJTKcHxuWYPRFFleV2Sbi0Dsk4XmDSToXTMnUnW/PW9J9W4UCgP+h0rTi9tiJd6qQgk2lPI/KKeybAPx+c7vZHdimbruzyCP9iZvd0VuBuIniuXirHQ8oG2IThFIUI8QOhjfNMg86GH4Bv4ixLlr4BDi2wDDwXTYYTgfnBJur1nAw2yGngw96JhQo+48cMWVE8kWwcA55ZuzwkSP/mpp9D6wFm2e1Bc8cPVraL2Ng7y6KfSNHqQfTYByYMmbT73WNmwZs6m8sBR54XCndTHwvu6v+8N+Jze9/jeGd8bpoHePtMv0/9U6e78bTtf+aly55P40cNtJ3PH3U6xQ9DkRNos+Chp2TpNwX4lZOwkTa4nOLPxpMLc8Sm0srSwD6Y1KW7ftPZ68x3DWS8d4cJbAKE6QJEfRrhAafMLV0RoCRLhKdBaJzNtzPD7dxLIgZ7Al4006exyHEYXMewjqApFokPRIu9FvLiPf96uWlpuZmRZKiH1i0OCNj1ar7zSDqYiRbCQsMrKUXZswxBkQEbCmv2RJgKK82+UcGbpk+0woVSxekQrYCzp4Hk30E3oHhAh+4fLcOPCfzOVu3cvKkHAWzNAVyjAyOQsrJix47n0OZpbTUDKdJp8CZs+BkAKfMnDkF+kJmmrcN4OSZs8CRuwZ+N76gampCxtj83XWO5X1GYc7hIypq+N32eTe6Wr/GfXW5GukBLnvJ1gEPhlmsuUHzg3Osp/vJCZ4flGsFf27fjV18spjdTfQUuVANcgldRA3hKhSUutCGgGhDaMo0tXMHwiUq3gG5entO2xmnECa3H53AjRpKFFYIK7qrHjMJ75sEC91BPlGc0TlZY9qlsdcuZaXy0D3hfz4cmLd2WzbK3Xhhdw7c2VLCxtxsFCMEo8bArEww9ruOrc5joK9g1xp85MghQ4wyuPV71+/tMVxAMmzA1lSt+WmbjFkwL/lV6az7APzZ5qvVmmy7b1bJGrTDhmRfMBYbWMZmNOu3bJdPlLL/5WOR2XZCTJpmU4mx8lv9Fg76T8NagO4vUacJ+n/Sr0b/LYb8+1z5QCb935a0m6WWYXzwh4DO2Sa9g2jEnJ6tYwTU5jp7N2RmaHkn/gjEb/fXpmpXbkpAGaAv7pnKAfdc6bg4GZx1L3QuQ8lVC3BvXbC8f2eHQEqkBuc9aO6h9849M3oPucrgAyQY/HEv7PYJJQy23Ft3/R+xczqmsHWDgrDCyzfcl1o5ehKxnUOr5Bm6NhTGR4u1rtDEvlZ8dGgklLeNCk3ZbeKaO0bkcMfoKt+6ng/DUPPI6AAlDXlE0dzwsKPadkjqKjDXGEgg4b2CK7vx65M0xSlPmNsOA58/g1xWSDDKeq/KV5AR89+zc6OGjKSKtxUqR4NtF47VuMZemcTBDQxGqzqqrXIMCnm2xkXq1QJIIkO8EpmROcOkIyevYmhUqurWBmgCe4U5WJFHiiLKqKKOJtrooo8hxphihl6g5bGv3MAXkfBvPaFbVq6ga4Uq+wWdEfo6NVTmr1oVkYoye2NvfCWLmYQx0sjozFSxszhZ4Ctjb7QtavLQDNa0L5HRZQYJYxrNLbJR4QhZvOV46Fm/lqB428nsrJSx/OwbEgYA') format('woff2');
	}

	.icon {
		font-family: 'HMfont-home' !important;
		font-size: 56rpx;
		font-style: normal;
		color: #333;

		&.biaoqing:before {
			content: '\e797';
		}

		&.jianpan:before {
			content: '\e7b2';
		}

		&.yuyin:before {
			content: '\e805';
		}

		&.tupian:before {
			content: '\e639';
		}

		&.chehui:before {
			content: '\e904';
		}

		&.luyin:before {
			content: '\e905';
		}

		&.luyin2:before {
			content: '\e677';
		}

		&.other-voice:before {
			content: '\e667';
		}

		&.my-voice:before {
			content: '\e906';
		}

		&.hongbao:before {
			content: '\e626';
		}

		&.tupian2:before {
			content: '\e674';
		}

		&.paizhao:before {
			content: '\e63e';
		}

		&.add:before {
			content: '\e655';
		}

		&.close:before {
			content: '\e607';
		}

		&.to:before {
			content: '\e675';
		}
	}

	.chat-item {
		display: flex;
		padding: 20rpx 30rpx;

		&.flex-flow {
			flex-flow: row-reverse;

			.chat-content {
				background: #38D99D;

				&::after {
					left: unset;
					top: 30rpx;
					right: -16rpx;
					border-width: 16rpx 0 12rpx 24rpx;
					border-color: transparent transparent transparent #38D99D;
				}
			}

			.chat-voice {
				background: #38D99D;
				justify-content: flex-end;

				.bo-image {
					transform: rotate(180deg);
				}

				&::after {
					left: unset;
					top: 30rpx;
					right: -16rpx;
					border-width: 16rpx 0 12rpx 24rpx;
					border-color: transparent transparent transparent #38D99D;
				}
			}

			.chat-imgs {
				// &::after {
				// 	left: unset;
				// 	top: 30rpx;
				// 	right: -16rpx;
				// 	border-width: 16rpx 0 12rpx 24rpx;
				// 	border-color: transparent transparent transparent #fff;
				// }
			}

			.system-content {
				color: #ebebeb;
				background-color: #999;

			}
		}

		.chat-head {
			flex-shrink: 0;
			width: 90rpx;
			height: 90rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: block;
			}
		}

		.chat-content {
			max-width: 480rpx;
			margin: 0 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			font-size: 28rpx;
			line-height: 36rpx;
			padding: 20rpx 20rpx 20rpx 20rpx;
			color: #181818;
			display: flex;
			align-items: center;
			position: relative;
			user-select: text;
			min-width: 90rpx;
			justify-content: center;

			&::after {
				content: '';
				position: absolute;
				top: 30rpx;
				left: -16rpx;
				width: 0;
				height: 0;
				border-width: 16rpx 24rpx 12rpx 0;
				border-style: solid;
				border-color: transparent #fff transparent transparent;
			}
		}

		.chat-voice {
			max-width: 480rpx;
			margin: 0 20rpx;
			background-color: #fff;
			border-radius: 12rpx;
			font-size: 28rpx;
			line-height: 36rpx;
			padding: 20rpx 20rpx 20rpx 20rpx;
			color: #181818;
			display: flex;
			align-items: center;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				top: 30rpx;
				left: -16rpx;
				width: 0;
				height: 0;
				border-width: 16rpx 24rpx 12rpx 0;
				border-style: solid;
				border-color: transparent #fff transparent transparent;
			}

			image {
				display: block;
			}

			.bo-image {
				width: 23rpx;
				height: 30rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
			}
		}

		.chat-imgs {
			width: 250rpx;
			margin: 0 20rpx;
			border-radius: 12rpx;
			background-color: #fff;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}

			// &::after {
			// 	content: '';
			// 	position: absolute;
			// 	top: 30rpx;
			// 	left: -16rpx;
			// 	width: 0;
			// 	height: 0;
			// 	border-width: 16rpx 24rpx 12rpx 0;
			// 	border-style: solid;
			// 	border-color: transparent #fff transparent transparent;
			// 	z-index: -1;
			// }
		}

		.chat-weixin {
			display: flex;
			align-items: center;
			height: 100rpx;

			.weixin-icon {
				padding-top: 20rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.weixin-no {
				font-size: 26rpx;
				color: #4C310C;

				span {
					color: #999;
				}

				view {
					font-weight: 600;
					font-size: 34rpx;
					color: #000;
				}
			}
		}
	}

	.fit-bottom {
		padding-bottom: calc(env(safe-area-inset-bottom) / 2) !important;
	}

	.operate_area {
		display: flex;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 28rpx;

		.item {
			margin-left: 30rpx;
			width: 163rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			border-radius: 60rpx;
			color: #000;
		}
	}

	.member_upgrade {
		width: 650rpx;
		background-color: #000;
		border-radius: 12rpx;
		padding-bottom: 40rpx;
		border: #6d6650 2px solid;

		.weixin-title {
			text-align: center;
			color: #e1c4a6;
			padding-top: 40rpx;

			.popup-close {
				font-size: 24rpx;
				position: absolute;
				right: 20rpx;
				color: #e1c4a6;
				top: 15rpx;
			}
		}

		.weixin-desc {
			color: #a3a3a3;
			font-size: 24rpx;
			text-align: center;
			padding-top: 20rpx;
		}


		.weixin-price {
			font-size: 34rpx;
			padding-top: 40rpx;
			height: 180rpx;
			line-height: 180rpx;
			color: #e1c4a6;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;


			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.weixin-btn {
			padding: 30rpx 50rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;



			.btn-single {
				width: 200rpx;
				height: 80rpx;
				border-radius: 5rpx;
				color: #000;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #fff;

				text {
					color: #fff;
					font-size: 22rpx;
				}

				.del-line {
					text-decoration: #ffffff line-through;
				}

				.tips {
					width: 154rpx;
					height: 50rpx;
					border-radius: 18rpx;
					font-size: 24rpx;
					color: #fff;
					background-color: #FD4C61;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: -158rpx;
					margin-top: -88rpx;
				}
			}

			.btn-upgrade {
				width: 200rpx;
				height: 80rpx;
				border-radius: 5rpx;
				background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
				color: #000;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #feb918
			}


		}
	}

	.wx_popup {
		width: 650rpx;
		height: 650rpx;
		position: relative;

		.bg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.del_wxpopup {
			position: absolute;
			top: 0;
			right: 20rpx;
			padding: 10rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.popup_title {
			display: flex;
			justify-content: center;

			.title_text {
				background-image: linear-gradient(135deg, #FFEACB, #F7B15C);
				font-size: 30rpx;
				font-weight: bold;
				color: #240E37;
				padding: 10rpx 30rpx;
				border-bottom-left-radius: 24rpx;
				border-bottom-right-radius: 24rpx;

			}
		}

		.popup_lit {
			display: flex;
			justify-content: center;
			margin: 10rpx 0 20rpx;
			color: #a7a7ae;
			font-size: 26rpx;
		}

		.wx_p_content {
			.price {
				view {
					color: #111;
				}

				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 46rpx;

				// padding-top: 312rpx;
				.price_item {
					display: flex;
					align-items: center;
					flex-direction: column;
					border-radius: 24rpx;
					border: 4rpx solid transparent;
					padding: 0rpx 20rpx 26rpx;
					overflow: hidden;
					position: relative;

					.price_type {
						padding: 10rpx 30rpx;
						font-size: 26rpx;
						border-bottom-left-radius: 24rpx;
						border-bottom-right-radius: 24rpx;
					}

					.crown {
						width: 66rpx;
						height: 66rpx;
						margin: 10rpx 0 22rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.price_tit {
						font-size: 36rpx;
						position: relative;

						.first_vip {
							position: absolute;
							top: -30rpx;
							right: -32rpx;
							padding: 4rpx 10rpx;
							border-radius: 50rpx;
							color: #fff;
							background-color: #ef4034;
							font-size: 22rpx;
						}
					}

					.price_lit {
						font-size: 24rpx;
					}

					.active_icon {
						position: absolute;
						right: 0;
						bottom: 0;
						width: 60rpx;
						height: 60rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.gold_card {
					background-image: linear-gradient(140deg, #f4dbb4, #e1b059);

					.price_type {
						background-image: linear-gradient(180deg, #f7e7ca, #e1b35f);
					}

					.price_tit {
						color: #4c310c;
					}

					.price_lit {
						color: #72532a;
					}
				}

				.blak_card {
					background-image: linear-gradient(140deg, #655e59, #292b31);

					.price_type {
						color: #fff;
						background-image: linear-gradient(180deg, #67605a, #37373a);
					}

					.price_tit {
						color: #fff;
					}

					.price_lit {
						color: #c8c8c8;
					}
				}

				.price_active {
					border-color: #fff;

				}
			}

			.vip_time {
				display: flex;
				align-items: center;
				justify-content: center;

				.time_tit {
					font-size: 28rpx;
				}

				.time_inp {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					margin: 20rpx 0;

					input {
						width: 35%;
						text-align: center;
						font-size: 28rpx;
						margin-right: 10rpx;
						border-bottom: 2rpx solid #fff;
					}
				}
			}

			.input-placeholder {
				font-size: 28rpx !important;
			}

			.wx_btn {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 50rpx;
				margin-top: 60rpx;

				.btn_item {
					width: 260rpx;
					height: 70rpx;
					border-radius: 60rpx;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.gold_btn {
					color: #f9d9a2;
					box-sizing: border-box;
					border: 4rpx solid #f9d9a2;
				}

				.black_btn {
					color: #6C250F;
					background-image: linear-gradient(to right, #FCEBC0, #F2B162);
				}
			}

			.vip_tips {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;
				font-size: 22rpx;
				margin-top: 30rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 14rpx;
				}
			}
		}
	}

	.send_vip {

		.price_item {
			.price_tit {
				margin: 10rpx 0;
			}
		}

		.wx_btn {
			justify-content: center !important;

			.btn_item {
				margin-top: 40rpx;
			}
		}
	}

	.weixin {
		width: 650rpx;
		background-color: #fff;
		border-radius: 12rpx;
		padding-bottom: 40rpx;

		.weixin-title {
			text-align: center;
			color: #000;
			padding-top: 40rpx;
		}

		.weixin-desc {
			color: #999;
			font-size: 24rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.weixin-tips {
			color: #d5391d;
			font-size: 24rpx;
			text-align: center;
			padding-top: 20rpx;
		}

		.weixin-price {
			font-size: 34rpx;
			padding-top: 40rpx;
			color: #000;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.weixin-btn {
			padding: 30rpx 50rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.btn-cancel {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC
			}

			.btn-sub {
				width: 180rpx;
				height: 60rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #b95222 100%);
				color: #4C310C;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #B98B51
			}

			.btn-comfirm {
				width: 220rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC;
			}


			.btn-gift {
				width: 420rpx;
				height: 70rpx;
				border-radius: 15rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #ffffff;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #B98B51;
			}
		}
	}

	.chat-time {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		opacity:0.6;
		
		text {
			padding: 5rpx 15rpx;
			font-size: 24rpx;
			color: #d2d2d2;
			// background-color: #fff;
			border-radius: 2rpx;
		}
	}

	.chat-wx {
		font-size: 28rpx;
		min-width: 400rpx;
		//padding: 30rpx 50rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		color: #e5e5e5;
		line-height: 64rpx;
		//width: 480rpx;

		.weixin-icon {
			padding-top: 20rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.top {
			position: relative;
			box-sizing: border-box;
			border-top-right-radius: 5rpx;
			border-top-left-radius: 5rpx;
			height: 170rpx;
			width: 480rpx;
			background-color: #FEF0BC;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #999;

			.hongbao {
				width: 90rpx;
				height: 90rpx;

				image {
					width: 100%;
					height: 100%;
				}

			}

			.text {
				height: 90rpx;
				width: 300rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				text:nth-child(1) {
					color: #000;
					font-size: 16px;
				}

				text:nth-child(2) {
					color: #666;
					font-size: 12px;
				}
			}

			.sanjiao1 {
				width: 0;
				height: 0;
				border-top: 15rpx solid transparent;
				border-left: 20rpx solid #FEF0BC;
				border-bottom: 15rpx solid transparent;
				position: absolute;
				top: 20rpx;
				right: -20rpx;
			}

			.sanjiao2 {
				width: 0;
				height: 0;
				border-top: 15rpx solid transparent;
				border-right: 20rpx solid #FEF0BC;
				border-bottom: 15rpx solid transparent;
				position: absolute;
				top: 20rpx;
				left: -20rpx;
			}
		}

		.bottom {
			box-sizing: border-box;
			width: 100%;
			height: 50rpx;
			line-height: 50rpx;
			padding-left: 10rpx;
			font-size: 24rpx;
			color: #835d5f;
			background-color: #FEF0BC;
			border-bottom-right-radius: 12rpx;
			border-bottom-left-radius: 12rpx;
			justify-content: center;
		}

		.red_money {
			color: #ea4e75;
		}

		&.chat-bg {
			margin: 0rpx 20rpx;
			border-radius: 12rpx;
			color: #fff;
			//padding: 30rpx 30rpx 10rpx;
			//background-color: #fff;
			background: linear-gradient(180deg, #fea10a 0%, #ff8800 100%);

			image {
				margin-top: 10rpx;
				width: 80rpx;
				height: 80rpx;
			}
		}

		&.weixin-bg {
			margin: 0rpx 20rpx;
			border-radius: 12rpx;
			color: #fff;
			//padding: 30rpx 30rpx 10rpx;
			//background-color: #fff;
			background: linear-gradient(180deg, #12d269 0%, #00a500 100%);

			image {
				margin-top: 10rpx;
				width: 80rpx;
				height: 80rpx;
			}

			.desc {
				color: #fff;
				margin: 15rpx;
			}
		}

		&.chat-bg-ed {
			margin: 10rpx 20rpx;
			border-radius: 12rpx;
			background: linear-gradient(180deg, #ffe4a5 0%, #ffd590 100%);
			color: #fff;

			image {
				margin-top: 10rpx;
				width: 100rpx;
				height: 100rpx;
			}
		}

		&.chat-bg2 {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			width: 460rpx;
			height: 200rpx;
			margin: 0rpx auto 0;
			border-radius: 12rpx;
			color: #ffffff;
		}

		&.chat-own {
			margin-right: 30rpx;
		}

		&.chat-on {
			margin-left: 30rpx;
		}

		.wx-btn {
			width: 100%;
			padding: 0rpx 20rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			color: #161819;

			.btn-cancel {
				width: 150rpx;
				height: 50rpx;
				border-radius: 10rpx;
				color: #4C310C;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #B98B51
			}

			.btn-comfirm {
				width: 150rpx;
				height: 50rpx;
				border-radius: 10rpx;
				background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
				color: #4C310C;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #FEF0BC;
			}

			.btn-gift {
				width: 420rpx;
				height: 60rpx;
				border-radius: 15rpx;
				color: #fff;
				font-size: 32rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #ffc;
			}

			.desc {
				width: 100%;
				//height: 60rpx;
				border-radius: 15rpx;
				color: #fff;
				font-size: 28rpx;
				letter-spacing: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.chat-wxbox {
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #fff;
		max-width: 480rpx;
		font-size: 28rpx;
		border: 1rpx solid #999999;
		.chat-tit {
			display: flex;
			align-items: center;
			padding: 20rpx;

			.tit-head {
				width: 100rpx;
				height: 100rpx;
				border-radius: 16rpx;
				margin-right: 20rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tit-text {
				flex: 1;
				color: #111111;
			}
		}

		.chat-btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-top: 2rpx solid #d9d9d9;

			.btn-item {
				flex: 1;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	
	}
	.chat-mask{
		position: relative;
		&::after{
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(127, 127, 127, 0.43);
		}
	}
	

	.chat-system {
		// background-color: #fff;
		max-width: 75%;
		font-size: 26rpx;
		// color: #111;
		padding: 20rpx;
		opacity: 0.6;
		line-height: 1.6;
		border-radius: 16rpx;
		margin: 10rpx auto;
		text-align: center;

		.metals {
			color: #c38b08;
			text-decoration: underline;
		}
	}
	.chat-null{
		height: 0 !important;
		padding: 0 !important;
	}

	.gift_box {
		margin: 0rpx 20rpx;
		border-radius: 12rpx;
		background-color: #fff;
		max-width: 480rpx;
		width: 480rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 20rpx;

		.gift_icon {
			width: 160rpx;
			height: 160rpx;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
		.gift_iconMy{
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 65%;
				height: 65%;
			}
		}

		.gift_content {
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.tit {
				font-size: 32rpx;
				color: #111;
			}


			.gift_btn {
				text-align: center;
				border-radius: 50rpx;
				font-size: 28rpx;
				color: #fff;
				padding: 10rpx 24rpx;
				background-image: linear-gradient(to right, #846DFF, #802FBB);
			}
		}
	}

	.paybox {
		background-color: #2c2c2c;
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.pay_tit {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tit {
				color: #fff;
				font-size: 30rpx;
			}

			.tit_icon {
				padding: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}

		.vip_type {
			view {
				color: #fff;
			}

			padding: 0 20rpx;

			.type_tit {
				padding: 10rpx 0;
				font-size: 30rpx;
			}

			.type_check {
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin: 20rpx 0;

				.type_item {
					font-size: 28rpx;
					color: #fff;
					padding: 14rpx 0;
					width: 240rpx;
					text-align: center;
					border-radius: 50rpx;
					background-color: #808080;
				}

				.type_active {
					background-color: #FFDFA5;
					color: #4C310C;
				}
			}
		}

		.vip_time {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;

			.inpbox {
				width: 40%;
				display: flex;
				align-items: center;

				input {
					color: #fff;
					flex: 1;
					text-align: right;
					padding: 0rpx 20rpx;
					margin-right: 10rpx;
					border-bottom: 2rpx solid #fff;

				}
			}

			.input-placeholder {
				font-size: 26rpx;
			}
		}

		.pay_btn {
			margin: 20rpx;
			padding: 20rpx 0;
			color: #FFF;
			text-align: center;
			border-radius: 50rpx;
			background-image: linear-gradient(to right, #FEF0BC, #B98B51);
		}
	}

	.wifi-symbol {
		width: 50rpx;
		height: 50rpx;
		box-sizing: border-box;
		position: relative;
		/*必须，否则苹果overflow失效*/
		overflow: hidden;
		transform: rotate(-45deg) translate3d(-10rpx, -10rpx, 0rpx);

		.wifi-circle {
			border: 4rpx solid #000;
			border-radius: 50%;
			position: absolute;
		}

		.first {
			width: 5rpx;
			height: 5rpx;
			background: #000;
			top: 45rpx;
			left: 45rpx;
		}

		.second {
			width: 25rpx;
			height: 25rpx;
			top: 35rpx;
			left: 35rpx;
		}

		.third {
			width: 40rpx;
			height: 40rpx;
			top: 25rpx;
			left: 25rpx;
		}

		&.animation {
			.second {
				animation: fadeInOut 1s infinite 0.2s;
			}

			.third {
				animation: fadeInOut 1s infinite 0.4s;
			}
		}

		&.direction {
			transform: rotate(135deg) translate3d(-10rpx, -10rpx, 0rpx);
		}

		@keyframes fadeInOut {
			0% {
				opacity: 0;
				/*初始状态 透明度为0*/
			}

			100% {
				opacity: 1;
				/*结尾状态 透明度为1*/
			}
		}
	}

	.popup-mall {
		background-color: #111111;
		width: 100%;
		padding-bottom: 20rpx;
		height: 100vh;
		position: relative;

		.popup-close {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
		}

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #ffffff;
		}

		.popup-wrap {
			// max-height: 800rpx;
			// min-height: 300rpx;
			height: 100vh;
			padding-top: 10rpx;
			padding-bottom: 30rpx;


			.popup-mall-list {
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-bottom: 100rpx;

				.popup-mall-item {
					background-color: #fff;
					width: 48%;
					height: 420rpx;
					padding: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					// border: 2rpx solid #000000;
					border-radius: 20rpx;
					margin-bottom: 20rpx;

					image {
						width: 280rpx;
						height: 280rpx;
					}

					.popup-mall-item-title {
						color: #333;
						font-size: 26rpx;
						margin: 15rpx 0;
						height: 40rpx;
					}

					.popup-mall-item-info {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 100%;

						.popup-mall-item-info-left {
							display: flex;
							align-items: center;

							text {
								color: #B98B51;
							}

							.f-24 {
								font-size: 24rpx;
							}
						}

						.popup-mall-item-info-right {
							display: flex;
							justify-content: center;
							align-content: center;
							border-radius: 18rpx;
							background: linear-gradient(180deg, #FEF0BC 0%, #B98B51 100%);
							color: #4C310C;
							font-size: 24rpx;
							padding: 7rpx 18rpx;
						}
					}
				}
			}
		}

		.popup-btn {
			position: fixed;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-direction: column;
			align-content: center;

			.popup-btn-img {
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 160rpx;
				height: 160rpx;
				background-color: #B98B51;
				border-radius: 100%;
				position: relative;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.popup-btn-img-num {
					position: absolute;
					right: -18rpx;
					top: -12rpx;

					/deep/ .u-badge {
						font-size: 32rpx;
						width: 30rpx;
						height: 30rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}

			.popup-btn-btn {
				margin-top: 20rpx;
				padding: 12rpx 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 34rpx;
				background: linear-gradient(180deg, #37373c 0%, #1d1c23 100%);
				color: #fff;
			}
		}
	}

	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 40rpx;
				position: absolute;
				right: 50rpx;
				top: 25rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-btn {
			position: fixed;
			margin: 0 auto;
			width: 220rpx;
			height: 75rpx;
			border-radius: 10rpx;
			color: #4C310C;
			font-size: 32rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 1px solid #B98B51
		}
	}

	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 40rpx;

		.list-cell {
			width: 25%;
			height: 190rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 20rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}

			.list-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.list-name {
				color: #333;
				font-size: 26rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}


	.member-list {
		width: 540rpx;
		display: flex;
		justify-content: space-between;
		margin: 40rpx auto;

		.member-item {
			width: 260rpx;
			height: 250rpx;
			box-sizing: border-box;
			padding: 40rpx 0rpx 10rpx;
			border: 2rpx solid #dba46e;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex-direction: column;
			position: relative;

			&.active {
				border-color: #dba46e;
				border: 2rpx solid #dba46e;
				box-shadow: 0 0 15px #fff;

				.title {
					color: #fff;
				}

				.price {
					font-size: 28rpx;
					color: #fff;

					text {
						color: #fff;
						font-size: 36rpx;
					}
				}

				.name {
					color: #b5b5b5;

					text {
						text-decoration: #b5b5b5 line-through;
					}

				}

				.desc {
					background-color: #dba46e;
					color: #fff;
				}
			}

			.title {
				height: 60rpx;
				font-size: 38rpx;
				color: #b5b5b5;
				padding-top: 15rpx;
				padding-bottom: 15rpx;

				span {
					font-size: 24rpx;
					margin-left: 5rpx;
				}
			}

			.price {
				height: 40rpx;
				font-size: 28rpx;
				color: #b5b5b5;

				text {
					color: #b5b5b5;
					font-size: 36rpx;
				}
			}

			.name {
				height: 50rpx;
				line-height: 60rpx;
				font-size: 30rpx;
				color: #b5b5b5;

				text {
					text-decoration: #b5b5b5 line-through;
				}
			}

			.desc {
				width: 260rpx;
				height: 65rpx;
				position: absolute;
				top: -30rpx;
				background-color: #dba46e;
				border-radius: 10rpx;
				color: #fff;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}
	}
</style>